CSS深入学习二——3D转换

空间转换

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

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

空间转换也叫 3D转换

属性：transform

空间位移

使用translate实现元素空间位移效果

语法：

transform: translate3d(x, y, z);

transform: translateX(值);

transform: translateY(值);

transform: translateZ(值);

取值

像素单位数值

百分比

思考：

默认情况下，为什么无法观察到Z轴位移效果？

答：Z轴是视线方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观察远近效果

目标：使用 perspective 属性实现 透视 效果

透视：

使用 perspective 属性实现 透视 效果

属性 （添加给父级）

perspective: 值;

取值：

像素单位数值， 数值一般在 800 – 1200 。

作用：

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

代码演示透视效果：

  body {
            perspective: 1000px;
        }

        .box {
            margin: 50px auto;
            width: 300px;
            height: 300px;
            background-color: pink;
            transition: all .5s;
        }

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

演示结果：

会有一种放大的结果。

空间旋转

使用 rotate 实现元素 空间旋转 效果

语法：

transform: rotateZ(值);

transform: rotateX(值);

transform: rotateY(值);

判断旋转方向：

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

拓展：

rotate3d(x, y, z, 角度度数) ：用来设置 自定义旋转轴的位置 及旋转的角度

x，y，z取值为0-1之间的数字

立体呈现：

使用transform-style: preserve-3d呈现立体图形

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

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

注意：

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

代码演示立体呈现效果：

.box {
            position: relative;
            margin: 50px auto;
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;
            transition: all 1s;
        }

        .yi,
        .er {
            position: absolute;
            left: 0;
            top: 0;
            width: 300px;
            height: 300px;
            background-color: pink;
            transition: all 1s;
        }

        .box:hover .yi {
            background-color: green;
            transform: translateZ(300px);
        }

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

演示结果：鼠标经过盒子，盒子就会以Y轴旋转90deg,展现立体效果。

案例：

制作3D导航：

代码演示：

 

        

            
首页index
            
天下足球tianxiazuqiu
            
爱奇艺aiqiyi
            
腾讯视频tengxunzuqiu
            
抖音douyin
        
    

 .box {
            margin: 50px auto;
            width: 600px;
        }

        .box li {
            position: relative;
            float: left;

            transform-style: preserve-3d;
            transition: all 1s;
        }

        .box li a:first-child {
            display: block;
            padding: 0 30px;
            line-height: 40px;
            transform: translateZ(20px);
            background-color: green;
        }

        .box li a:last-child {
            position: absolute;
            display: block;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
            line-height: 40px;
            text-align: center;
            transform: rotateX(90deg) translateZ(20px);
        }

        .box li:hover {
            transform: rotateX(-90deg);
        }

 演示结果：当鼠标移动到‘首页’上时，就会翻转呈现图二的样式。

空间缩放

使用 scale 实现 空间缩放 效果

语法：

transform: scaleX(倍数);

transform: scaleY(倍数);

transform: scaleZ(倍数);

transform: scale3d(x, y, z);