kkw learning css, the 9th day, the first contact with 3D
Posted May 28, 2020 • 2 min read
First of all, I want to achieve 3D effects. Then you need to set an attribute
When transform-style:preserve-3D is set, it represents the 3d scene applied at this time.
When setting to use transform-style:flat, the 2D transform effect is used.
So when setting X to rotate 45 degrees
It feels that the element is slightly backwards and the width is unchanged. But the height will become lower
When setting Y to rotate 45, imagine something tilted and elongated
When Z is set to 45 degrees, it looks like a 2d rotation
When all three are set at 45 degrees.
For the effect of 3D, I feel that my imagination is still lacking. Not very well described.
Some people say that you need to confirm the coordinate axis first. Use the left-hand rule.
But for me, it doesn't seem to understand anything.
Then I thought of a not-so-good way. Find a box yourself.
The rules of right and left are laid out.
When rotateX, it wraps around its own thumb
When rotateY, it wraps around its index finger
When rotateZ, it wraps around its middle finger
And because we have not yet used the perspective properties of the rendered 3D. So the pictures above
Based on your own experiment results, you will instantly know that the rendered 3D design.
Set the visual effect range of 3D elements.
I do n t know how to use it now,
The official website says it needs to be used with transform-origin
transform-orgin:One is the initial value of the X axis, and the other is the initial value of the Y axis. The default is 50%
Set whether the back element is visible.
Has two attribute values:visible visible and hiddle not visible
Of course for 3d
When setting the Z axis. It is equivalent to how many px an element is pushed back
Set the zoom factor of the Z axis