空间转换3D
3D坐标系
一定要记住3个坐标轴取值的正反:
- 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旋转
X轴旋转,Y轴旋转,Z轴旋转
transform: rotateX(360deg);
transform: rotateY(360deg);
transform: rotateZ(360deg);
左手法则
一定要搞清楚X轴和Y轴如何旋转的,旋转的度数是正值还是负值。
规则:
- 大拇指指向X轴正向方(右), 则四指指向的方向是旋转的方向
- 大拇指指向Y轴正向方(下), 则四指指向的方向是旋转的方向
立体呈现
让子盒子在父盒子内有空间的展示,此时可以给父亲添加
transform-style: preserve-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;
}
动画属性
animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕状态
-
动画名字参照css类选择器命名
-
动画时长和延迟时间别忘了带单位 s
-
infinate 无限循环动画(重复次数)
-
alternate 为反向 就是左右来回执行动画(跑马灯)
-
forwards 动画结束停留在最后一帧状态, 不循环状态使用
-
linear 让动画匀速执行
7.paused 鼠标经过时暂停动画
多组动画之间用逗号隔开