一、空间转换

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

1.1 空间位移

语法

transform:translate3d(x,y,z);
transform:translateX(值);
transform:translateY(值);
transform:translateZ(值);

取值（正负均可）

像素单位数值
百分比

1.2 透视

使用perspective属性实现透视效果

思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？
- 答：近大远小，近清楚远模糊
思考：默认情况下，为什么无法观察到Z轴位移效果？
- 答：Z轴是视线方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观察远近效果

属性（添加给父级）

perspective:值;
取值：像素单位数值，数值一般在800~1200
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离

原理：

2.1 空间旋转

语法

transform:rotateZ(值);
transform:rotateX(值);
transform:rotateY(值);

注意点：

transform:rotateZ();效果和平面旋转(transform:rotate();)一样，因为绕z轴旋转就像是在与屏幕垂直的方向扎了一根针，绕着这根针旋转，就和绕着屏幕上一个点旋转一样的效果

2.2 左手法则

判断旋转方向：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向

2.3 立体呈现

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

思考：使用perspective透视属性能否呈现立体图形？

答：不能，perspective只增加近大远小，近实远虚的视觉效果

实现方法：

添加transform-style:preserve-3d;（给父元素添加）
使子元素处于真正的3d空间

呈现立体图形步骤

盒子父元素添加transform-style:preserve-3d;
按需求设置子盒子的位置（位移或旋转）

<style>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 2s;
            /* 让子元素处在3D空间 */
            transform-style: preserve-3d;
        }

        .cube div {
            /* 给子元素设置定位，为了让前后两个盒子在视线方向垂直显示 */
            position: absolute;
            width: 200px;
            height: 200px;
        }

        .front {
            background-color: orange;
            /* 给在前面的盒子设置位移，和后面的盒子拉开距离，构造出空间感效果 */
            transform: translateZ(200px);
        }

        .back {
            background-color: green;
        }

        .cube:hover {
            transform: rotateY(90deg);
        }
    </style>

<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>

案例——3D导航

实现思路

1、搭建立方体

li标签
- 添加立体呈现属性transform-style:preserve-3d;
- 添加旋转属性（为了便于观察效果，案例完成之后删除即可）
a标签
- 调节a标签的位置
  - a标签定位（子绝父相）
  - 英文部分添加旋转和位移样式
  - 中文部分添加位移样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D导航</title>
    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .navs {
            width: 300px;
            height: 40px;
            margin: 50px auto;
        }

        .navs li {
            position: relative;
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all .5s;
            transform-style: preserve-3d;
            /* 旋转：让大家在写代码的时候能看到立体盒子 
            注意：旋转的时候会改变轴向！！！！！！！！！*/
            /* transform: rotateX(-20deg) rotateY(30deg); */

        }

        .navs li a {
            /* 1、先让两个a标签层叠在一起 */
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }

        .navs li a:first-child {
            background-color: green;
            /* 3、再把绿色a标签朝z轴方向位移橙色a标签高度的一半 */
            transform: translateZ(20px);

        }

        .navs li a:last-child {
            background-color: orange;
            /* 2、再让li中的第二个a标签躺平：先x轴旋转90度 在向上位移绿色a标签高度的一半 为什么是translateZ呢 因为旋转会改变轴向，旋转90度之后的橙色a标签 此时z轴是朝上的 相当于从上面俯视它*/
            transform: rotateX(90deg) translateZ(20px);
        }

        /* li:hover 立方体旋转 */
        .navs li:hover {
            transform: rotateX(-90deg);
        }
    </style>
</head>

<body>
    <div class="navs">
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">Index</a>
            </li>
            <li>
                <a href="#">登录</a>
                <a href="#">Login</a>
            </li>
            <li>
                <a href="#">注册</a>
                <a href="#">Register</a>
            </li>
        </ul>
    </div>
</body>

</html>

3.1 空间缩放

使用scale实现空间缩放效果

语法：

transform:scaleX(倍数);
transform:scaleY(倍数);
transform:scaleZ(倍数);
transfrom:scale3d(x,y,z);

移动web网页开发——3D转换

一、空间转换

1.1 空间位移

1.2 透视

2.1 空间旋转

2.2 左手法则

2.3 立体呈现

案例——3D导航

3.1 空间缩放