当前位置：网站首页>2D conversion (move: translate, rotate: rotate, scale: scale, 2D conversion synthesis)

2D conversion (move: translate, rotate: rotate, scale: scale, 2D conversion synthesis)

2022-04-22 14:06:00 【fruit_ one】

2D transformation

transform yes CSS3 One of the most disruptive features of , Displacement of elements can be achieved 、 rotate 、 Zoom and so on

Move ：translate

rotate ：rotate

The zoom ：scale

2D Conversion is a technique to change the position and shape of a label on a two-dimensional plane

Move ：translate

2D Mobile is 2D A function in conversion , You can change the position of the elements , Like positioning

translate It will not affect the position of other elements

translate The percentage unit in is relative to its own element

There is no effect on the label 

transform: translate(x,y); Or write separately 
transform: translateX(x);
transform: translateY(y);

<!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>
        div {
            width: 300px;
            height: 300px;
            background-color: #ff0;
            /* xy All axes move  */
            transform: translate(100px,100px); 
            /*  Just move x Axis   */
            /* transform: translate(100px,0); */
            /* transform: translateX(100px); */
            /*  Just move y Axis   */
            /* transform: translate(0,100px); */
            /* transform: translateY(100px); */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

The floating effect of e-commerce Commodities 

<!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>
        div {
            width: 300px;
            height: 300px;
            background-color: #ff0;
            transition: all 0.3s;
        }
        div:hover {
            transform: translate(20px,0); 
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Horizontal vertical center 

<!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>
        .f {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: #f0f;
        }
        .b {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 100px;
            background-color: #0ff;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="f">
        <div class="b"></div>
    </div>
</body>
</html>

rotate ：rotate

2D Rotation is to make the element rotate clockwise or counterclockwise in the two-dimensional plane 

transform: rotate(45deg);

rotate It's degrees inside , The unit is deg

The angle is clockwise , The angle is negative counterclockwise

The default center point of rotation is the center point of the element 

<!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>
        img {
            width: 300px;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <img src=" Samurai girl .jpg" alt="">
</body>
</html>

Change the rotation center point 

transform-origin: x y;

x y To separate

x y The default conversion center is the center point of the element (50% 50%)

You can give x y Set pixel 、 percentage 、 Position NOUN (top bottem left right center)

<!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>
        div {
            margin: 100px auto;
            width: 200px;
            height: 200px;
            background-color: #f0f;
            transition: all 0.3s;
            /*  The default is 50% 50% */
            /*  Position NOUN  */
            /* transform-origin: left bottom; */
            /*  Pixels  */
            /* transform-origin: 50px 50px; */
            /*  percentage  */
            transform-origin: 20% 20%;
        }
        div:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

The zoom ：scale

Zoom in and out of elements , You can set the conversion center point transform-origin, The default is to scale at the center point , Scaling does not affect other boxes

x y It's the number. , No unit 

transform: scale(x,y);
<!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>
        div {
            margin: 200px auto;
            width: 300px;
            height: 300px;
            background-color: #ff0;
            transition: all 0.3s;
        }
        div:hover {
            /* x y Zoom ratio  */
            transform: scale(2,2);
            /*transform: scale(1.5,1.5);*/
            /*  narrow 
            transform: scale(0.5,0,5);*/
            /*  Scale equally  */
            /* transform: scale(2); */
            /* transform: scale(0.5); */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2D Conversion synthesis

Using multiple transformations at the same time , The format is transform: translate() rotate() scale()... etc.

The order will affect the conversion effect （ First, change the direction of the axis ）

When we have displacement and other properties at the same time , Put the displacement first

版权声明
本文为[fruit_ one]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204221402511676.html

边栏推荐

猜你喜欢

随机推荐