一 ，空间转换3D
3D坐标系：3D坐标系比2D多了一个Z轴
一定要记住3个坐标取值的正反：
X轴往右越大 ，是正值 ，否则反之
Y轴往下越大 ，是正值 ，否则反之
Z轴（指向我们）越大 ，是正值 ，否则反之
3D位移：
有完整写法：
只不过在很多情况下 ，我们喜欢分开写：
transform:translateX(100px);
transform:translateY(100px);
transform:translateZ(100px);
透视
透视的作用：空间转换时 ，为元素添加近大远小 ，近实远虚的视觉效果
语法：
perspective:800px
透视注意事项：
1.取值范围经常在800PX~1200px之间 。
2.一定给父级添加
3.透视距离也称为视距 ，所谓的视距就是人的眼睛到屏幕的距离 。
3D旋转
有了透视的加持 ，我们3D旋转效果会比较明显 。
rotateX
类似单杠旋转
注意：默认的旋转中心在盒子的中心位置 。
body{
/*父级添加透视*/
perspective:400px;
}
img{
transition:all 1s;
}
img:hover{
tranform:rotateX(360deg);
}
rotateY
类似钢管舞
body{
perspective:400px;
}
img {
transition: all 1s;
}
img:hover {
transform: rotateY(360deg);
}
左手法则
一定要搞清楚X轴和Y轴如何旋转的 ，旋转的度数是正值还是负值 。
规则：
1.大拇指指向X轴正向方（右） ，则四指指向的方向是旋转的方向
2.大拇指指向Y轴正向方（下） ，则四指指向的方向是旋转的方向
立体呈现
让子盒子在父盒子内有空间的展示 ，此时可以给父亲添加
transform-style；presrrve-3d;
二 、动画（重点）
动画最大的特点可以不用鼠标触发 ，自动的 ，反复的执行某些动画 。
动画使用分为定义和调用：
1.定义：
/*1.定义的动画*/
@keyframes dance{
from {
transform：scale(1)
}
to {
transform:scale(1.5)
}
}
或者是
/* 1. 定义的动画 */
@keyframes dance {
0% {
transform: scale(1)
}
100% {
transform: scale(1.5)
}
}
2.调用
img{
width:200px;
/* 2. 使用动画 animation: 动画名称 执行时间; infinite 循环*/
animation: dance .5s infinite;
}
动画属性
1.动画名字参照css类选择器命名
2.动画时长和延迟时间别忘了带单位S
3.infinate 无限循环动画
4.alternate 为反向 就是左右来回执行动画（跑马灯）
5.forwards 动画结束停留在最后一帧状态
6.linear 让动画匀速执行
鼠标经过暂停动画
/*鼠标经过box ，则ul停止动画*/
.box:hover ul{
animation-play-state:paused;
}
多组动画
/*我们想要2个动画一起执行 animation: 动画1 ，动画2 ，..动画n*/
animation: run 1s steps(12) infinite,move 5s linear forwards;
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
