CSS space conversion

1. Spatial displacement

grammar:

transform: translate3d(x, y, z);

transform: translateX(value);

transform: translateY(value);

transform: translateZ(值);

Value:

pixel unit value

Percentage (based on the size of the box itself)

Two, perspective

Syntax: perspective: value; (add to parent)

Value: pixel unit value, the value is generally 800px–1200px (represents the distance from the eye to the screen)

Function: When the space is converted, add the visual effect of near large and far small, near real and far virtual to the element

3. Space rotation

grammar:

transform: rotateZ(value); indicates rotation around the z axis

transform: rotateX(value); indicates rotation around the x-axis

transform: rotateY(value); indicates rotation around the y axis

rotate3d(x, y, z, angle in degrees); rarely used

The method of determining whether the rotation angle is positive or negative: hold the rotation axis with the left hand, point the thumb in the positive direction, and bend the finger in the positive direction of rotation

Four, three-dimensional presentation

Syntax: transform-style: preserve-3d; add to the parent element of the box

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            position: relative;
            background-color: aqua;
            margin: 0 auto;
            transition: all 2s;
            transform-style: preserve-3d;
           
        }
        div{
            width: 300px;
            height: 300px;
        }
        .font{
            position: absolute;
            background-color: blueviolet;
            transform: translateZ(300px);
        }

    .after{
        position: absolute;
         background-color:cadetblue
          
    }

    .box1:hover{
        transform: rotateY(-360deg);
    }
    </style>
</head>
<body>
 <div class="box1">
 <div class="font"></div>
 <div class="after"></div>   

 </div>
   
</body>
</html>

CSS space conversion

Guess you like