kkw learning css process, on the 8th day, 2D conversion rotation and tilt understanding

Posted May 26, 20203 min read

Well, the busy company's project has been shelved a little bit these days.
I am still unfamiliar with the two places in CSS.
First, about rotation in 2D conversion
Second, about tilt in 2D conversion

1. The effect of the first rotation:

image.png
In the above, I set the rotation angle to 30 °, and it will rotate a certain distance along the direction of the X axis.
image.png
The effect is that if you rotate it 180 °, you will find that it has been reversed.

_Because in the 2D event, the rotation does not appear to rotate according to the Y axis, so I currently understand that the rotation is based on the X axis. _

The code written is as follows.

<style>
    * {padding:0; margin:0}
    .warp1 {
        width:100%;
        height:100vh;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .warp2 {
        width:800px;
        height:800px;
        border:1px solid;
        flex-direction:column;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .warp3 {
        width:300px;
        height:300px;
        background-color:lightpink;
        transition:all 2s;
       /* transform-origin:center; * /
    }
    .warp3:hover {
        transform:rotate(180deg);/* You can change the value yourself * /
    }


    .warp4 {
        height:6px;
        background:coral;
        width:100%;
    }
</style>
<body class = "warp1">
    <div class = "warp2">
        <div class = "warp3"> I am the part that will change </div>
        <div class = "warp4"> </div>
    </div>


</body>

2. About skew(). tilt

When I opened it, I even thought that the tilt and rotation were almost the same, and the appearance didn't even make much difference. Then he was beaten decisively.
image.png
The upper side is inclined by 30 degrees in the X direction, and the direction of the Y axis is 0 degrees. We see that the container does not exceed the line.

image.png
The above is the tilt in the y-axis direction by 30deg, and the X direction is 0. The container is a bit like rotating, both exceeding the line, but the difference is that after rotating, the container is still a square, but after tilting, the container becomes a parallelogram. A shape change has occurred.
The tilt I understand is,

If two people stand face to face.

The tilt of the X axis is when you look directly at it and see him shaking left and right.

The tilt of the Y axis is that you look straight ahead, his body does not shake left and right, but rotates at an angle.

Similar to military training, the instructor stood still facing the slogan we shouted, turned left, turned right(turned to the left and right by an angle), from this point of view, we tilted a designated y-axis degree.
According to the X axis, when the container rotates 90 degrees, it will be parallel to the X axis. You can also pretend to be the horizontal line I set below.

When shew() is set to a value, then it is only for the rotation of the X axis.

image.png
The above is how X and Y are rotated by 30 degrees

When testing on your own, you can increase the length of the animation to make it easier to understand.
There is also a separate angle. Setting it to 45deg is my feeling better.
<style>
    * {padding:0; margin:0}
    .warp1 {
        width:100%;
        height:100vh;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .warp2 {
        width:800px;
        height:800px;
        border:1px solid;
        flex-direction:column;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .warp3 {
        width:300px;
        height:300px;
        background-color:lightpink;
        transition:all 6s;/* Change its value to make the animation slower, and the effect is obvious * /
       /* transform-origin:center; * /
    }
    .warp3:hover {
        transform:skew(0deg, 45deg);/* Set the value of X or Y separately * /
       /* 90deg 180deg 360deg 45deg(X axis best) Y axis(see individual) * /
    }


    .warp4 {
        height:6px;
        background:coral;
        width:100%;
    }
</style>
<body class = "warp1">
    <div class = "warp2">
        <div class = "warp3"> I am the part that will change </div>
        <div class = "warp4"> </div>
    </div>


</body>