kkw learning css, the 9th day, the first contact with 3D

Posted May 28, 20202 min read

First of all, I want to achieve 3D effects. Then you need to set an attribute

First rotation:

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.
image.png image.png
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.

2, perspective

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

tanslateZ axis,

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