2 d / 3 d conversion
This is the third day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021
CSS transforms allow you to move, rotate, scale, and tilt elements.
The 2 d transformation
Primarily through the transform property, which is defined using a function.
Contains the following methods
Displacement of 1.
- Translate () : translate (x) takes a parameter to represent the edge
x
The axial displacementx
Pixel, which defaults to 0 along the Y-axis, takes two parameters translate (x,y) to represent the distance shifted along the X-axis and the distance shifted along the Y-axis - TranslateX (x), translateY(y)
Example:
<body>
<div class="item"></div>
</body>
<style>
*{
margin: 0;
padding: 0;
}
.item{
width: 200px;
height: 300px;
border: 2px solid red;
margin: 200px auto;
}
.item:hover{
transform: translate(20px.20px);
}
</style>
Copy the code
Effect:
2. Rotate
- Rotate (Angle):** Rotate (Angle):** Has only one parameter, representing the selected Angle, in deg.
2d
Space can only revolve around the center of the elementz
Shaft rotation- Parameters for
is
Values areshun
Clockwise rotation, isnegative
Values areThe inverse
Clockwise rotation
Such as:
<body>
<div class="item"></div>
</body>
<style>
*{
margin: 0;
padding: 0;
}
.item{
width: 200px;
height: 300px;
border: 2px solid red;
margin: 200px auto;
}
.item:hover{
transform: rotate(90deg)
}
</style>
Copy the code
Effect:
3. Zoom
- scale():When a parameter indicates the same time
x
Axis andy
The axis scales in the same multiple in both directions, and the two parameters represent respectivelyx
andy
Scale the axis by the corresponding multiple
Example:
<body>
<div class="item"></div>
</body>
<style>
*{
margin: 0;
padding: 0;
}
.item{
width: 200px;
height: 300px;
border: 2px solid red;
margin: 200px auto;
background: powderblue;
}
.item:hover{
transform:scale(1.5.2);
}
</style>
Copy the code
Effect:
Deformation of 4.
- **skew() : ** indicates the edge
x
Shaft deformationx
Point of view,y
Shaft by default0
, two parameters represent the edgex
Shaft deformationx
The Angle, alongy
Shaft deformationy
The point of view. Unit: deg (degrees) - Written separately: skewX(), skewY()
Example:
<body>
<div class="item"></div>
</body>
<style>
*{
margin: 0;
padding: 0;
}
.item{
width: 200px;
height: 300px;
border: 2px solid red;
margin: 200px auto;
background: powderblue;
}
.item:hover{
transform:skew(20deg.30deg);
}
</style>
Copy the code
Effect:
5.matrix()
The Matrix method has six parameters, including rotation, scaling, move (pan) and tilt functions.
It’s sort of the previous co-writing
The parameters are as follows:
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
Copy the code
6. Switch centers
Transform-origin can be used to change the origin of rotation, scaling, and deformation. The default value is center. You can set it to top bottom center left right. You can also use px, em, and percentage values.
For example: Change the conversion center from the upper-left corner. Then choose 90 degrees
.item:active{
transform-origin: left top;
transform: rotate(90deg);
}
Copy the code
Effect:
3 d conversion
Since it is 3D, we know it must be a three-dimensional, so there is a sense of space. We have the x, y, and z axes.
The following table lists all 3D transform attributes:
attribute | describe |
---|---|
transform | Apply 2D or 3D transformations to elements. |
transform-origin | Allows you to change the position of the converted element. |
transform-style | Specifies how nested elements are displayed in 3D space. |
perspective | Specifies the perspective of 3D elements. |
perspective-origin | Specify the bottom position of the 3D element. |
backface-visibility | Defines whether an element is visible when it is not facing the screen. |
CSS 3D conversion method
function | describe |
---|---|
matrix3d(n.n.n.n.n.n.n.n.n.n.n.n.n.n.n.n) | Define a 3D transformation using a 4×4 matrix of 16 values. |
translate3d(x.y.z) | Define 3D transformation. |
translateX(x) | Define the 3D transformation, using only the values for the X-axis. |
translateY(y) | Define the 3D transformation using only the values for the Y-axis. |
translateZ(z) | Define the 3D transformation using only the values used for the Z-axis. |
scale3d(x.y.z) | Define the 3D zoom transformation. |
scaleX(x) | Define a 3D scale transformation by giving an X-axis value. |
scaleY(y) | Define a 3D scale transformation by giving a value for the Y axis. |
scaleZ(z) | Define a 3D zoom transform by giving a z-axis value. |
rotate3d(x.y.z.angle) | Define 3D rotation. |
rotateX(angle) | Defines a 3D rotation along the X axis. |
rotateY(angle) | Defines 3D rotation along the Y-axis. |
rotateZ(angle) | Defines a 3D rotation along the Z axis. |
perspective(n) | Defines the perspective view of the 3D transformation element. |
1. Attributes applied to the parent element
-
Set 3D transform: transform-style: preserve-3d. The default value is flat, which indicates that 3D transform is not reserved
-
The distance of a 3D element from the view, or line of sight, in units of px
-
Position of observation point: perspective-origin: It is the same as the above transformation center, but it is 3d with a z-axis coordinate added.
2. Rotate
translate3d
translateX
translateY
translateZ
- Rotate3d (x, y, z, Angle) : along
x
.y
.z
Three direction vector values determine the rotation of the coordinate pointangle
The Angle backface-visibility
Property defines whether an element is visible when rotated back to the screen, visible back, hidden back not visible- RotateX (Angle), rotateY(Angle), and rotateZ(Angle) : rotate the corresponding degree along the corresponding axis.
Example:
.item{
width: 200px;
height: 300px;
border: 2px solid red;
margin: 200px auto;
background: powderblue;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
Copy the code
Effects: This usually works well with animation.
We want to know what the effect is around the x, y, and z axes? I won’t be confused in the future
Displacement of 3.
translate3d
translateX
translateY
translateZ
translate3d(x, y, z)
: Three arguments must be passed- TranslateX (x) : for
is
Is along theThe x axis
Our shift to the right is zeronegative
Is along theThe x axis
Shift to the right - TranslateY (y) : for
is
Is along they
The downward displacement is zeronegative
Is along they
Upward displacement - TranslateZ (z) : for
is
Is along theThe z axis
The displacement out of the screen is zeronegative
Is along theThe z axis
It moves into the screen
4. Zoom
scale3d
scaleX
scaleY
scaleZ
scale3d(num, num, num)
: Three arguments must be passedscaleX(x)
scaleY(y)
scaleZ(z)
, respectively representx
andy
Axis andz
Scale the axis by the corresponding multiple.
Write in the last
I think 2D/3D is still a lot of fun and can achieve a lot of beautiful effects, especially when combined with animation. 3D z-axis is difficult to demonstrate the effect, combined with animation is easier to reflect. The next post uses 3D with a little bit of animation to achieve album effects. Welcome big guy to read, like the support of the thumbs-up.
‘
You have to work really hard to look effortless.Copy the code