transform 平面转换（3d）

最新推荐文章于 2024-04-30 14:59:54 发布

你想要那颗糖

最新推荐文章于 2024-04-30 14:59:54 发布

阅读量1.5k

点赞数 3

分类专栏： HTML+CSS 文章标签：平面 3d html

本文链接：https://blog.csdn.net/qq_50260510/article/details/129493144

版权

HTML+CSS 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

一、位移

1.原理： 使用transform属性实现元素在空间内的位移、旋转、缩放等效果。

2.空间： 是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。

3.语法：

1.transform: translate3d(x, y, z);

2.transform: translateX(值);

3.transform: translateY(值);

4.transform: translateZ(值);

4.取值：

1.正负均可

2.像素单位数值

3.百分比

<!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>3d位移</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body{
            /* /* 透视:调整眼睛到屏幕的距离;透视的值越小,眼睛到屏幕的距离就越小,看到的值就越大.反之亦然. 
            透视值推荐值 800-1200px;
            透视要给父元素添加
            近大远小,近实远虚,Z轴需要添加透视 */
            perspective: 800px;
            /* 透视和3D没有关系,只是为了看Z轴 */

        }
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        body:hover .box{
            /* 3d位移  单独写法 */
            /* x轴:上负  下正 */
            transform: translateX(100px);
            transform: translateX(-100px);

            /* Y轴:上负   下正 */
            transform: translateY(100px);
            transform: translateY(-100px);

            /* Z轴:正值是面向自己,负值是自己的反方向 */
            transform: translateZ(100px);
            transform: translateZ(-100px);
       

        /* 3D位移的连写 */
        /* transform: translate3d(X轴,Y轴,Z轴); */


    }
        

    </style>
</head>
<body>
    <div class="box"></div>
    
</body>
</html>

二、透视

1.原理： 使用perspective属性实现透视效果。

2.属性：（添加给父级）perspective: 值;透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

3.取值： 像素单位数值，数值一般在800 – 1200。

4.作用：

（1）空间转换时，为元素添加近大远小、近实远虚的视觉效果；

（2）调整眼睛到屏幕的距离;透视的值越小,眼睛到屏幕的距离就越小,看到的值就越大.反之亦然；

（3）透视值推荐值 800-1200px;透视要给父元素添加；

（4）近大远小,近实远虚,Z轴需要添加透视；

（5）透视和3D没有关系,只是为了看Z轴。

5.注意： 透视的默认中心在屏幕中央,眼睛距离在页面中间,如果内容不在盒子中间则会出现倾斜的现象。解决方法就是要把内容放在页面中间,不然会显示变形

<!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>3d透视</title>
    <style>
        body{
            perspective: 800px;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
            transition: all 2s;
        }
        body:hover .box{
            transform: translateZ(500px);
            background-color: aqua
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

三、旋转

1.原理： 使用rotate实现元素空间旋转效果。

2.语法：

（1）transform: rotateZ(值);

（2）transform: rotateX(值);

（3）transform: rotateY(值);

（4）连写：rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度。x，y，z 取值为0和1，0表示不围绕坐标轴旋转,1表示围绕坐标轴旋转。

（5）X轴正值是从上往下旋转,负值是从下往上旋转；

（6）Y轴正值是从左往右旋转,负值是从右往左旋转；

（7）Z轴正值是顺时针旋转,负值是逆时针旋转。

<!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>3d之旋转效果</title>
    <style>
        .box{
            position: relative;
            width: 500px;
            height: 400px;
            background-color: pink;
            margin: 100px auto;
        }

        .box img{
            width: 500px;
            height: 400px;
            transition: all 2s;
        }

        .box:hover img{
            /* 3d x轴:rotate 单位: deg度  turn圈 */
            /* X轴正值是从上往下旋转,负值是从下往上旋转 */
            /* transform: rotateX(180deg); */
            /* Y轴正值是从左往右旋转,负值是从右往左旋转 */
            /* transform: rotateY(180deg); */
            /* Z轴正值是顺时针旋转,负值是逆时针旋转 */
            /* transform: rotateZ(180deg); */

            /* 旋转的综合写法   transform: rotate3d(X,Y,Z,角度);
            x,y,z的取值范围是0和1;
            0表示不围绕坐标轴旋转,1表示围绕坐标轴旋转*/
            transform: rotate3d(0,1,1,45deg);
            /* 仅了解 */
        }

    </style>
</head>
<body>
    <div class="box">
        <img src="../2.素材/hero.jpeg" alt="">
    </div>
</body>
</html>

左手法则：

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向。

<!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>3d旋转之综合案例</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
            width: 200px;
            height: 200px;
            /* background-color: pink; */
            margin: 100px auto;
            /* 开启3d */
            transform-style: preserve-3d;
            transition: all 2s;
            
        }

        .box:hover{
            transform: rotateY(180deg);
        }

        .box div{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: aqua;
        }

        .box .two{
            transform: translateZ(-100px);
            background-color: blueviolet;
        }

        .box .one {
            transform: translateZ(100px);
        }



    </style>

    <!-- 1.把三个盒子层叠在一起,使用定位-子绝父相;
         2.通过位移使盒子发生间隔;
         3.开启3d环境(推荐给父盒子);
         4.给父盒子添加向y轴的旋转方向; -->
</head>
<body>
    <div class="box">
        <div class="one">前面</div>
        <div class="two">后面</div>
    </div>
    
</body>
</html>

四、立体呈现

1.原理： 使用transform-style: preserve-3d呈现立体图形。

2.呈现立体图形步骤

（1）盒子父元素添加transform-style: preserve-3d；

（2）按需求设置子盒子的位置（位移或旋转）；

（3）空间内，转换元素都有自已独立的坐标轴，互不干扰。

<!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>3d之导航栏</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style-type: none;
            width: 1200px;
            margin: 100px auto;
        }
        ul li{
            position: relative;
            width: 120px;
            height: 40px;
            /* background-color: pink; */
            transform-style: preserve-3d;
            transition: all 1s;
        }

        ul li:hover{
            transform: rotateX(-90deg);

        }

        ul li span{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }

        ul li span:first-child{
            background-color: greenyellow;
            transform: translateZ(20px);
        }

        ul li span:last-child{
            background-color: aqua;
            transform: translateY(-20px) rotateX(90deg);
        }
    </style>
    
    <!-- 1.首页用父相子绝的定位,使两个盒子叠在一起;
         2.把绿色的盒子往前移动父盒子的一半;(隔开距离)
         3.给推荐父元素添加3d效果;(transform-style:preserve-3d)
         4.给父盒子添加x轴旋转90度;
         5.给天蓝色盒子旋转90度;
         6.给天蓝色盒子往上y轴位移绿色盒子高度的一半;
        -->
</head>
<body>
    <ul>
        <li>
            <span>首页</span>
            <span>index</span>
        </li>
    </ul>
    
</body>
</html>

五、缩放

1.原理： 使用scale实现空间缩放效果。

2.语法：

（1）transform: scaleX(倍数);（scaleX可以理解为盒子的宽）

（2）transform: scaleY(倍数);（scaleY可以理解为盒子的高）

（3）transform: scaleZ(倍数);（scaleZ可以理解为面向自己的方向在进行放大,需要把盒子进行旋转）

（4）连写：transform: scale3d(x, y, z);（连写 transform: scale3d(X,Y,Z);值为倍数）

<!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>3d之缩放</title>
    <style>
        body{
            perspective: 1000px;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 200px auto;
            transition: all 2s;
        }

        .box:hover{
            /* scaleX可以理解为盒子的宽 */
            transform: scaleX(2);
            /* scaleY可以理解为盒子的高 */
            transform: scaleY(2);
            /* scaleZ 可以理解为面向自己的方向在进行放大,需要把盒子进行旋转 */
            transform: scaleZ(10) rotateX(90deg);


            /* 连写  transform: scale3d(X,Y,Z);值为倍数*/
            transform: scale3d(2,2,2);


        }

    </style>
</head>
<body>
    <div class="box"></div>
    
</body>
</html>

你想要那颗糖

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
transform 平面转换（3d）

使用transform属性实现元素在空间内的位移、旋转、缩放等效果。是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。2.transform: translateX(值);3.transform: translateY(值);4.transform: translateZ(值);1.正负均可2.像素单位数值3.百分比。
复制链接

扫一扫