1. 2D conversion
Through CSS3 transform, we can move, zoom, rotate, bevel and other operations on elements
1. 2D movement: translate(). Using the translate() function, you can move the element from its original position. Move the origin of the upper left corner of the reference element
- Syntax: translate(tx) | translate(tx,ty)
- tx is the length of a vector representing the movement of the X axis (abscissa). When its value is positive, the element moves to the right direction of the X axis, otherwise when its value is negative, the element moves to the left direction of the X axis.
- ty is the length of a vector representing the movement of the Y axis (longitudinal scale). When its value is positive, the element moves down the Y axis, and when its value is negative, the element moves up the Y axis. If ty is not explicitly set, it is equivalent to ty=0.
- You can also use translateX(tx) or translateY(ty)
- Case example:
div:hover{
/*设置两个值，第一个参数表示X方向 第二个参数表示Y方向*/
/*transform: translate(100px,100px);*/
/*也可以只传入一个参数，表示X方向*/
/*transform: translate(100px);*/
/*也可以指定具体的方向,如下代码，表示Y方向正值方向上移动100px*/
transform:translateY(100px);
}
2. 2D scaling: scale(): The scale() function allows the element to scale the object according to the center origin. The default value is 1. Therefore, any value between 0.01 and 0.99 makes an element shrink; and any value greater than or equal to 1.01 makes the element appear larger. Scaling refers to the center point of the element.
- Syntax: scale(sx|ty) | scale(sx,sy)
- sx: The scaling vector used to specify the horizontal coordinate (X axis) direction. If the value is between 0.01 and 0.99, the object will be reduced in the X axis direction. If the value is greater than or equal to 1.01, the object will be enlarged in the Y axis direction.
- sy: Used to specify the zoom amount in the longitudinal coordinate (Y-axis) direction. If the value is between 0.01 and 0.99, the object will be reduced in the Y-axis direction. If the value is greater than or equal to 1.01, the object will be enlarged in the Y-axis direction.
- You can also use scaleX(sx) or scaleY(sy)
- Case example:
div:hover{
/*传入两个值，第一个参数表示X方向的缩放 第二个参数表示Y方向上的缩放*/
/*transform: scale(2,0.5);*/
/*也可以只传入一个值，表示X方向和Y方向上相同的缩放*/
/*transform: scale(2);*/
/*也可以指定具体方向上的缩放*/
transform: scaleX(2);
}
3. 2D rotation: rotate(): The rotate() function assigns a 2D rotation to the element according to the origin of the object through the specified angle parameter. It mainly operates in two-dimensional space and accepts an angle value to specify the amplitude of rotation. If this value is positive, the element rotates clockwise relative to the origin center; if this value is negative, the element rotates counterclockwise relative to the origin center
- Syntax: rotate(a);
- a: Represents a rotation angle value. Its value can be positive or negative. If the value is positive, the element rotates clockwise relative to the element center point by default; if the value is negative, the element rotates counterclockwise relative to the element center point by default
- Case example:
div:hover{
/*传入旋转的角度，如果正值，则进行顺时针旋转*/
/*transform: rotate(90deg);*/
/*如果传入负值，则逆时针旋转*/
transform: rotate(-270deg);
}
4. 2D flip: skew(): can make the element display obliquely. It can tilt an object at a certain angle around the X axis and Y axis with its center position. This is different from the rotation of the rotate() function, which only rotates without changing the shape of the element. The skew() function does not rotate, but only changes the shape of the element
- 语法 ： skew (ax) | skew (ax, ay)
- ax: Used to specify the tilt angle of the element in the horizontal direction (X-axis direction).
- ay: Used to specify the tilt angle of the element in the vertical direction (Y axis direction). If this value is not explicitly set, it defaults to 0.
- You can also use skewX(sx) or skewY(sy)
- Case example:
div:hover{
/*在X方向上倾斜30度*/
transform: skewX(30deg);
}
}
5. Set the rotation axis: transform-origin
- Example:
div{
width: 100px;
height: 100px;
margin: 100px auto;
background-color: red;
/*添加过渡*/
transition:all .5s;
/*设置缩放的中心，默认是元素中心位置,现修改为元素左上角*/
transform-origin: 0px 0px;
}
div:hover{
transform: scale(2);
}
6. Set multiple transform attributes at the same time (connected by spaces)
transform:translateX(500px) rotate(90deg);
Second, 3D conversion
Three-dimensional transformation uses the same properties based on two-dimensional transformation, allowing us to transform elements based on three coordinate directions. Like two-dimensional deformation, three-dimensional deformation can be set using the transform property
1. 3D movement
- Method: translate3d(x,y,z) makes the elements move in these three latitudes, or they can be written separately, such as: translateX(length), translateY(length), translateZ(length)
- Example:
div:hover{
/*Y轴移动+100px*/
/*transform:translateY(100px);*/
/*X轴移动100px*/
/*transform:translateX(100px);*/
/*x轴和Y轴方向同时移动*/
transform:translate3d(100px,100px,0px);
}
2. 3D zoom
- scale3d(number,number,number) makes the elements scale in these three latitudes, or they can be written separately, such as: scaleX(),scaleY(),scaleZ()
- Example
div:hover{
/*Y轴方向放大1倍*/
/*transform: scaleX(2);*/
/*X轴方向缩小0.5*/
/*transform: scaleX(0.5);*/
/*x轴和Y轴方向同时进行缩放*/
transform: scale3d(2,0.5,1);
}
3. 3D rotation
- rotate3d(x,y,z,angle): Specify the coordinate axis that needs to be rotated
- rotateX(angle) is the element to rotate according to the x axis;
- rotateY(angle) is the element to rotate according to the y axis;
- rotateZ(angle) is to rotate the element according to the z axis
- Example:
div:hover{
/*Y轴方向旋转45度*/
/*transform: rotateY(45deg);*/
/*X轴方向旋转90度*/
/*transform: rotateX(90deg);*/
/*x轴和Y轴方向同时进行旋转放*/
transform: rotate3d(1,1,0,45deg);
}
Three, cube case
Use the css3 transform property to make a cube