In css, transformations such as movement, scaling, and rotation of elements are realized through the transform attribute . IE10, Firefox, and Opera support the transform attribute. In order to be compatible with Chrome and Safari, the prefix -webkit- needs to be added, and IE9 needs to add the prefix -ms-. The attribute value of the transform attribute is a series of transformation functions. The usage is as follows:
transform: transform-function1() transform-function2() …;
Note: The conversion does not affect the layout of other elements.
2D conversion
- mobile
- translate(x,y): Define 2D movement transformation, move the element along the X axis and Y axis.
- translateX(n): Define the 2D movement transformation, move the element along the X axis.
- translateY(n): Define the 2D movement transformation, move the element along the Y axis.
- Zoom
- scale(x,y): Define the 2D scaling transformation, change the width and height of the element.
- scaleX(n): Define the 2D scaling transformation and change the width of the element.
- scaleY(n): Define the 2D scaling transformation, changing the height of the element.
- Spin
- rotate(angle): Define 2D rotation, specify the angle of rotation in the parameter (positive value is clockwise, negative value is counterclockwise).
- tilt
- skew(x-angle,y-angle): Define 2D skew transformation, along the X axis and Y axis.
- skewX(angle): Define the 2D skew transformation, along the X axis.
- skewY(angle): Define the 2D skew transformation, along the Y axis.
For the above transformation functions that require two parameters, if only one parameter is passed in, the second one is 0 by default. For the readability of the code, try to use a single-parameter transformation function instead. The median zoom value is greater than 1 to zoom in, and less than 1 to zoom out.
3D conversion
- mobile
- translate3d(x,y,z): Define the 3D movement transformation, move the element along the three coordinate axes at the same time.
- translateX(n): Define the 3D movement transformation, move the element along the X axis.
- translateY(n): Define the 3D movement transformation, move the element along the Y axis.
- translateZ(n): Define the 3D movement transformation, move the element along the Z axis.
- Zoom
- scale3d(x,y,z): Define 3D zoom conversion, change the length, height, and width of the element.
- scaleX(n): Define the 3D scaling transformation and change the length of the element.
- scaleY(n): Define the 3D scaling transformation, changing the height of the element.
- scaleZ(n): Define the 3D scaling transformation, changing the width of the element.
- Spin
- rotate3d(x,y,z,angle): Define 3D rotation, rotate the element along the directed line segment between the vector (x,y,z) that is the origin and (x,y,z) two points. Note that the parameter value does not need to add a unit. (The specific style is as follows).
- rotateX(angle): Define the 3D rotation along the X axis.
- rotateY(angle): Define the 3D rotation along the Y axis.
- rotateZ(angle): Define the 3D rotation along the Z axis.
When moving, the three parameters in translate3d() indicate that the moving distance needs to have a unit, and in rotate3d() it indicates that a direction vector does not need to have a unit.
The angle of rotation can be positive or negative, and the direction can be judged with our left hand: the left thumb points to the coordinate axis direction (or the direction of the vector in rotate3d(x,y,z,angle)), and the positive value is the direction of the four fingers That is, the clockwise direction. Negative values are in the opposite direction.
<html>
<head>
<meta charset="UTF-8">
<title>2d转换和3d转换</title>
</head>
<style>
body {
perspective: 400px;
transform-style: preserve-3d;
}
.big {
position: relative;
width: 100px;
height: 100px;
margin: 200px auto;
transform-style: preserve-3d;
transition: all 3s;
}
.big:hover {
transform: rotate3d(50,50,50,360deg);
/*沿着矢量（50,50,50）旋转360度*/
}
div{
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
font:700 50px/100px "微软雅黑";
text-align: center;
}
.first{
background-color: rgba(255, 255, 204,1);
transform:rotateY(180deg) translateZ(50px);
/*这里有一个点需要注意的是当元素发生转换后它的坐标原点或者或坐标系也会随之改变，这个特点会影响到它下次转换。*/
}
div:nth-child(2){
background-color: rgba(20,20,20,.5);
transform:rotateX(90deg) translateZ(50px);
}
div:nth-child(3){
background-color: rgba(0,255,0,.5);
transform:rotateY(90deg) translateZ(50px);
}
div:nth-child(4){
background-color: rgba(255,0,0,.5);
transform:rotateX(-90deg) translateZ(50px);
}
div:nth-child(5){
background-color: rgba(255,0,255,.5);
transform:rotateY(-90deg) translateZ(50px);
}
div:nth-child(6){
background-color: rgba(0,0,255,.5);
transform:translateZ(50px);
}
</style>
<body>
<div class="big">
<div class="first">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Conversion attributes
The above are all conversion functions related to conversion in css, which are applied to the transform attribute to transform elements. The following are important attributes related to conversion.
- transform realizes 2D or 3D transformation of elements.
- transform-origin : x-axis y-axis z-axis ; Change the position of the coordinate origin when the element is transformed. The coordinate origin is the center of the element by default.
- The value of x-axis can be left | center | right | length (a value representing the length) |% (relative to the size of the element itself).
- The value of y-axis can be top | center | bottom | length |%.
- The value of z-axis can only be length. Because all boxes are essentially two-dimensional planes, they just show a three-dimensional effect after 3D conversion. For example, in the following example, a cube is made by rotating 6 faces. Although the cube has a three-dimensional effect, in essence, this cube (visually rendered as a cube, which is a 3D effect rendered by 6 sub-elements through 3D conversion) is a two-dimensional plane in the element .big. By default, its coordinate origin is the center of the box, that is, the converted coordinates of the cube or the center of .big (the cross section between 1, 6 of the cube is a two-dimensional plane). So we can't say that I want to define the transformation origin of this cube to be the point where the front corner of its lower right corner is located, because in the plane it can be said that the lower right corner of the square is not the front corner of the lower right corner. (Record the personal thought process, the expression is not comprehensive enough.)
.big {
position: relative;
width: 100px;
height: 100px;
margin: 200px auto;
transform-style: preserve-3d;
transform-origin:center left 50px;
transition: all 3s;
}
.big:hover {
transform: rotateX(360deg);
/*沿着新的 X 轴旋转360度*/
}
After changing the conversion code of the first example.big part, the effect is as shown in the figure above. The principle is shown in the figure below:
Point O is the original default coordinate origin transform-origin:center center 0; At this time, the coordinates of the vertex in front of the lower right are (50,50,50), which is the end point of the rotation vector of the 3D rotation example. Change to transforrm-origin: center left 50px; after the coordinate origin becomes O ' . The X axis is at the center of the box plane, and the Y axis is on the left side of the box. Moving 50px outward is the new origin. Then rotate along the new X axis.
- transform-style: flat (default) | preserve-3d ; specifies whether the child elements in the element retain the 3D position. The default is not preserved, you can change to transform-stlye:preserve-3d on the parent element to make the child elements inside 3D rendering.
- perspective:number | none ; adding perspective effect is equivalent to adding viewpoints (eyes). If you don't add perspective to the ancestor element, all the 3D transformation effects of the element will not be able to show. So once you want to add a 3D transformation to an element, you must first add perspective to its ancestor element. (The parameter is the pixel value)
- perspective-origin: x-axis y-axis; the default value is center center, which defines the position of the viewpoint (the position of the viewpoint is positioned relative to the element to which the viewpoint is added). The characteristics are the same as the coordinate origin of the definition transformation, but there is no value in the Z direction (in fact, the perspective is the value).
- backface-visibility: visible | hidden; defines whether the back face of the rotating element is visible. It is visible by default, but when set to invisible, the element will disappear when it turns to the back.
Many of the above statements are personal thinking processes, and there may be mistakes in my understanding or lack of clarity in expression. I hope there are partners who do not understand or have different ideas, please leave a message to discuss. Good things to share, the link below is a very detailed blog about 2D and 3D conversion.
https://www.jianshu.com/p/17e289fcf467
Dust / 2020/12/21