一、空间转换 3D
3D坐标系
3D 坐标系比2D 多了一个Z轴。
- X 轴 往右越大,是正值, 否则反之
- Y 轴 往下越大,是正值,否则反之
- Z轴 (指向我们)越大,是正值,否则反之
3D位移
完整写法:
transform: translate3d(x, y, z);
很多情况下分开写(注意层叠性):
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);
透视
作用: 空间转换时,为元素添加近大远小、近实远虚的视觉效果
语法:
perspective: 800px;
透视注意事项:
-
取值范围经常在 800px ~ 1200px 之间。
-
一定给父元素添加
-
透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离。
- 其中 d 为透视的距离
- z 是
translateZ
的距离, 这个距离靠近我们,盒子越大
3D旋转
有了透视的加持,我们3d旋转效果会比较明显。
rotateX
注意:默认的旋转中心在盒子的中心位置。
body {
/* 父级添加透视 */
perspective: 400px;
}
img {
transition: all 1s;
}
img:hover {
transform: rotateX(360deg);
}
rotateY
body {
perspective: 400px;
}
img {
transition: all 1s;
}
img:hover {
transform: rotateY(360deg);
}
立体呈现
给父元素添加 让子盒子在父盒子内有空间的展示,
transform-style: preserve-3d;
二、动画
动画最大的特点可以不用鼠标触发,自动的,反复的执行某些动画。
动画使用分为定义和调用:
-
定义:
/* 1. 定义的动画 */ @keyframes dance { from { transform: scale(1) } to { transform: scale(1.5) } }
或者是
/* 1. 定义的动画 */ @keyframes dance { 0% { transform: scale(1) } 100% { transform: scale(1.5) } }
-
调用
img { width: 200px; /* 2. 使用动画 animation: 动画名称 执行时间; infinite 循环*/ animation: dance .5s infinite; }
动画属性
animation: 动画名称 动画时长 速度曲线 延迟事件 重复次数 动画方向 执行完毕时的状态
- 动画名字参照css类选择器命名
- 动画时长和延迟时间别忘了带单位 s
- infinate 无限循环动画(重复次数)
- alternate 为反向 就是左右来回执行动画(跑马灯)
- forwards 动画结束停留在最后一帧状态, 不循环状态使用
- linear 让动画匀速执行
鼠标经过暂停动画
/* 鼠标经过box, 则 ul 停止动画 */
.box:hover ul {
animation-play-state: paused;
}
多组动画
/* 想要多个动画一起执行 animation: 动画1, 动画2, ... 动画n */
animation: run 1s steps(12) infinite, move 5s linear forwards;