空间位移translate

语法

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

取值（正负均可）
- 像素单位数值
- 百分比
transform: translateZ( );需要配合perspective效果更佳

透视perspective

perspective：视距、景深

观察屏幕的距离（眼睛与屏幕的距离：远小近大、近实远虚的视觉效果）
属性添加给父级
- perspective的取值一般400-1200px

空间旋转rotate

语法

  transform: rotateX(-90deg);transform: rotateY(-90deg);transform: rotateZ(-90deg);

transform: rotateZ(-90deg);与transform: rotate(-90deg);有相同效果

左手法则
- 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
拓展：rotate实现元素空间旋转效果
- rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
- x，y，z 取值为0-1之间的数字

立体呈现transform-style：preserve-3d

实现方法
- 添加transform-style：preserve-3d
- 使子元素处于3d空间

呈现立体图形步骤

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

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

 body {            /* 开启透视让结构有近大远小的效果 */            perspective: 800px;        }

.box {            width: 200px;            height: 200px;            margin: 100px auto;            background-color: #0a0;            transition: 1s;            /* 开启3d立体环境 */            transform-style: preserve-3d;        }

 .son {            width: 200px;            height: 200px;            background-color: orange;            /* 让橙色盒子沿着z轴，向人眼方向走200px */            /* 往z轴移动200px为底部盒子让出距离（个人理解） */            transform: translateZ(200px);        }

/* 鼠标悬停box 让box沿着Y轴旋转200deg */        .box:hover {            transform: rotateY(70deg);        }

<body>    <div class="box">        <div class="son">前面</div>    </div></body>

3D导航实例

实现下图效果

观察盒子是如何摆放

将两个盒子（绿盒子和黄色）叠放在一起

.nav li a {            /* 所有的a标签 不占位置 */            position: absolute;            display: block;            width: 100%;            height: 100%;            text-align: center;            text-decoration: none;            color: #fff;        }

3.将黄色盒子沿X轴旋转90deg并往上移盒子高度一半

.nav li a:last-child {            background-color: orange;            /* 围绕x轴旋转90deg */            transform: rotateX(90deg) translateZ(20px);        }

4.给大盒子li：hover添加X轴旋转-90deg实现最终效果

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

完整结构：

<style>        ul {            margin: 0;            padding: 0;            list-style: none;        }        .nav {            width: 300px;            height: 40px;            margin: 50px auto;        }        .nav li {            position: relative;            float: left;            width: 100px;            height: 40px;            line-height: 40px;            /* 旋转: 让大家在写代码的过程中看到立体盒子 开启上帝视角~~~ */            /* transform: rotateX(-20deg) rotateY(30deg); */            /* 开启3d环境 */            transform-style: preserve-3d;            transition: 1s;        }        .nav li a {            /* 所有的a标签 不占位置 */            position: absolute;            display: block;            width: 100%;            height: 100%;            text-align: center;            text-decoration: none;            color: #fff;        }        .nav li a:first-child {            background-color: green;            transform: translateZ(20px);        }        .nav li a:last-child {            background-color: orange;            /* 围绕x轴旋转90deg */            transform: rotateX(90deg) translateZ(20px);        }        .nav li:hover {            transform: rotateX(-90deg);        }    </style>

<body>    <div class="nav">        <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>

空间缩放scale

语法：

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

动画

实现步骤：

定义动画

@keyframes move {            form{            }            to{            }        }

或

@keyframes move {            0% {}            25% {}            50% {}            100% {}        }

使用动画

animation: 名字 执行时间 执行次数 ;

动画的属性

属性

作用

取值

animation-name

动画名字

animation-duration

动画时长

animation-delay

延迟时间

animation-iteration-count

重复次数

infinite无限循环

animation-direction

动画执行方向

alternate反向

animation-timing-function

运动曲线

steps（数字）：逐帧动画

animation-fill-mode

动画执行完毕是状态

forwards：最后一帧状态、backwards：第一帧状态（默认）

animation-play-state:

暂停动画

paused暂停通常配合hover使用

结束语：

前有阴暗是因为背后有阳光

空间转换 动画