“This is the 10th day of my participation in the Gwen Challenge.

TranslateX () translateZ() translate3D (x,y,z) translateX() translateX() translateZ() translate3D (x,y,z) Translate () -> translate(x,y)

1. By default, horizontal X, vertical Y, and Z are vertical to the screen;

2. Can write worth to write negative, 3 d images translateZ positive, naked eye is amplified, translate negative, naked eye is narrow, the farther from the eye;

3. You can write px, or you can write a percentage that is relative to itself. If it is 300px wide, moving 100% to the X axis means moving 300px. If you are 100px tall, you have moved 100px in the Y axis. If img is set to width, but not height, it will scale proportionally, and shift to Y-axis by proportionally scaled height. This function does not need to know the height of the box in advance. It can be used to solve the problem of horizontal and vertical centering of boxes with unknown width and height. Relative IMG’s own Settings:

position: absolute;
top 50%
left 50%
margin-top: The negative of half the height of the boxmargin-left: The negative of half the width of the boxCopy the code

Unknown height: parent setting of img position: relative

position: absolute;
top: 50%
left: 50%Margin-left: a negative half of the width of the boxtranslateY(-50%)
Copy the code

Unknown width for the same reason, place the width 50% full code as follows:

.wrapper {
    border: 20px solid orange;
    width: 600px;
    height: 600px;
    position: relative;
}
.wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    /* margin-top: -159px; * /
    /* margin-left: -100px; * /
    transform: translate(-50%, -50%);
}
Copy the code
<div class="wrapper">
    <img src="./img/2.jpg" alt="">
</div>
Copy the code



4. If you move each XY axis by 100px, you cannot write:

transform : translateX(100px);
transform : translateY(100px);
Copy the code

Since the same property is set: transform, the latter overrides the former, and only the effect of the shift to the Y axis is in effect

transform : translateX(100px) translateY(100px);
Copy the code

No comma or: transform: translate(x,y); , if you write only one value, it represents horizontal movement and does not move the Y-axis

ScaleX (n) : horizontally extended to n times the original, with the central point as the axis, both sides of the scale, n greater than 1 is enlarged, less than 1 is reduced, negative value represents flip scaleY() scaleZ() scale3D (x,y,z). Scale (x, y) | scale (n) – > scale (n, n), if only write a value, has been one of the vertical scaling, if two values, the first is the level, the second is the vertical direction

The center point of the default image is its origin, and the zoom is also scaled from the center point to all sides

Also cannot write two lines, one scaleX, one scaleY, this will overwrite, leaving only the latter style set scaleX(-0.5):

transform: translate(200px.200px) scaleX(-0.5);
Copy the code

Effect: Flipped horizontally and reduced to 0.5 with the original text: ‘MOE,’

Transform-origin transform-origin Sets the element origin position transform-origin: 50% 50% 0; The default value

The X axis direction: left | center | | right length | %

Y direction: top | center | | bottom length | %

Z-axis direction: Length

The original image directly shows the effect:

When I use the default origin, scale(2,0.5) looks like this: it starts in the center, shrinks in height, and shrinks in width

transform: scale(2.0.5);
Copy the code



When I set the center point to the upper left corner:

transform-origin: 0 0;
transform: scale(2.0.5);
Copy the code

As you can see, I’m scaling from the top left corner



rotating: the rotate

rotateX()

rotateY()

rotateZ()

rotate3d(x,y,x)

Rotate () -> rotateZ(). Rotate along the Z-axis by default

As the picture is not 3D and has no thickness, you can’t see the effect of the front being bigger and the back being smaller. You can only see that the height is smaller. When you rotate 90deg, you can’t see it (not a line) because there is no thickness

The following GIF shows the effect of the image Rotate from 45deg to 90deg



The Angle could be a negative number, representing the direction of rotation, 360deg

Similarly, when an image is rotated along the Y-axis, the width of the image is visible to the naked eye and becomes invisible when it is rotated to 90deg

Rotation along the Z-axis: rotateZ

From 45 deg turn:



The default rotation center is the image center

Set the rotation center point to the center of the upper edge of the image:

width: 200px;
transform-origin: 100px 0;/* or write 50% 0; Or the center top; * /
transform: rotate(45deg);
Copy the code

Change from 45DEg to 0DEg:



Case study:

Draw a clock with 12 hands, using 12 Li’s and rotations

body.ul.li {
    padding: 0;
    margin: 0;
    list-style: none;
}
ul {
    margin: 0 auto;
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 2px solid # 000;
    
}
ul li {
    position: absolute;
    top: 0;
    left: 150px;
    width: 2px;
    height: 10px;
    background: # 000;
    margin-left: -1px;
}
Copy the code

So let’s draw a circle where the 12 Li’s are all at zero right now



We want Li to rotate around the center of the circle, and the default center of rotation is the center of the element itself, i.e. :

li:nth-child(1) {
    transform: rotate(30deg)}Copy the code

As you can see, the center of the rotation is at the center of the element itself, so the first Li rotates and forms an ‘x’ shape with the others:



So we need to adjust transform-Origin, and imagine that origin is 0, 0 is the top left corner of li, so 1px 150px is the center of the circle.



Effect:



One LI effect is complete, 12 Li are set manually, the code is too long, using JS to automatically generate li and rotation styles

var oUl = document.getElementsByTagName('ul') [0];
var str = ' ';
for (var i = 1; i <= 12 ; i ++){
    str += '<li style = "transform :rotate(' + (i*30) + 'deg)"></li>'
}
oUl.innerHTML = str;
Copy the code

Effect:



Complete CSS code:

    <style>
        .wrapper {
            border: 20px solid orange;
            width: 600px;
            height: 600px;
            /* position: relative; * /
        }
        .wrapper img {
            /* position: absolute; top: 50%; left: 50%; * /
            width: 200px;
            /* margin-top: -159px; * /
            /* margin-left: -100px; * /
            /* transform-origin: 0 0; * /
            transform-origin: 100px 0;/* or write 50% 0; Or the center top; * /
            transform: rotate(45deg);
        }
        body.ul.li {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        ul {
            margin: 0 auto;
            position: relative;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 2px solid # 000;
            
        }
        ul li {
            position: absolute;
            top: 0;
            left: 150px;
            width: 2px;
            height: 10px;
            background: # 000;
            margin-left: -1px;
            transform-origin: 1px 150px;
        }
    </style>
Copy the code

HTML code:

<body>
    <ul>
    </ul>
    <script src="16.js"></script>
</body>
Copy the code

The JS code is the js code above

Skew: Skew (x,y) : Only one Angle represents the X-axis and two represent the x. The Y-axis is not tilted along the Z-axis. The X-axis is equal to holding the upper left and lower right corners of the hand and pulling them outward. Along the Y-axis is equal to holding the lower left and upper right corners of the hand and pulling outward

Change from 45DEg to 100deg along the X-axis:



From 45deg to negative along the y axis: