41.css3设置变形(平移和旋转)_css3平移会导致变形原点改变?

作者：AllinToyou | 2024-03-18 23:45:37

踩

css3平移会导致变形原点改变?

文章目录

css3设置变形

css3设置变形

变形是指通过css来改变元素的形状或位置

变形不会影响到页面布局
使用transform来设置变形效果

css3设置平移（translateX、translateY、translateZ）

计算机一般以屏幕最左上角为原点，向右是x轴正方向，向下是y轴正方向，向外，面向我们是z轴正方面（没有旋转的话）。
使用transfrom设置变形，

值translateX让元素沿着x轴平移
值translateY让元素沿着Y轴平移
值translateZ让元素沿着Z轴平移

详见代码，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>平移</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: orange;
            margin:0 auto;
            margin-top: 100px;
            transform: translateX(100px) translateY(-50px);
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: tomato;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

显示：
在这里插入图片描述
向x轴和y轴移动的我们都看了，那直接设置向y轴移动是什么效果呢？说实话，是啥效果都没有，因为在z轴的移动是立体效果，默认情况下浏览器是不支持透视的，如果一定要用，一定要看的话，那就给html属性先加一个perspective属性（一般设置600-1200 px，表示屏幕到页面的距离）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>平移</title>
    <style>
        html{
            perspective: 800px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: orange;
            margin: 100px auto;
            transform: translateZ(100px);
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: tomato;
            /*用来对比变化*/
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

显示：（上面是向z轴移动了100px的200200的div，下面是土生土长的200200的div）
在这里插入图片描述

css3设置图片突起加阴影效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置突起和阴影</title>
    <style>
        body{
            background-color: #bfa;
        }

        .box1,.box2{
            width: 200px;
            height: 300px;
            background-color: #fff;
            float: left;
            margin: 0 10px;
            transition: all .3s;
        }

        .box1:hover{
            transform: translateY(-4px);
            box-shadow: 0 0 10px rgba(0,0,0,.3);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

显示：
在这里插入图片描述
鼠标移入效果：（有种凸出来的赶脚，然后有层阴影）

css3设置旋转（rotateX、rotateY、rotateZ）

通过旋转可以使元素沿着x、y或者z轴旋转指定的角度（单位deg表示度，turn表示圈）
直接用代码演示rotateX效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转</title>
    <style>
        html{
            perspective: 800px;
        }

        .box1{
            width: 100px;
            height: 100px;
            background-color: tomato;
            margin: 200px auto;
            /*设置过渡时间为2s*/
            transition: 2s;
        }

        body:hover .box1{
            transform: rotateX(45deg);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

原先显示：
在这里插入图片描述
当鼠标进入body的框内，则会慢慢变成这样：

然后我们演示一个rotateY的效果，同样设置角度为45deg（旋转后效果）：

然后我们再演示一下，之前说的旋转之后z轴就不一样了是几个意思：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转</title>
    <style>
        html{
            perspective: 800px;
        }

        .box1{
            width: 100px;
            height: 100px;
            background-color: tomato;
            margin: 200px auto;
            /*设置过渡时间为2s*/
            transition: 2s;
        }

        body:hover .box1{
            transform: rotateY(45deg) translateZ(100px);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

刚开始显示：
在这里插入图片描述
进入body后，可以明显看到，他不仅旋转了，还会向右边移动，如下图：

注意：先旋转后平移跟先平移后旋转最后的效果是不一样的。（有兴趣的可以自己尝试一下）

transform: rotateY(45deg) translateZ(100px);/* 先旋转后平移 /
transform: translateZ(100px) rotateY(45deg);/ 先平移后旋转 */

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/266205