3d空间转换
3d坐标系
3D 坐标系比2D 多了一个Z轴
一定要记住3个坐标轴取值的正反
1.X 轴 往右越大,是正值, 否则反之
2.Y 轴 往下越大,是正值,否则反之
3.Z轴 (指向我们)越大,是正值,否则反之
3d位移
语法:
完整写法
transform: translate3d(x, y, z);
一般都是分开写
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);
透视
透视的作用: 空间转换时,为元素添加近大远小、近实远虚的视觉效果
1.为了看到z轴的效果
2.近大远小,近实远虚
3.一定给父亲添加
4.值推荐为800-1200px
perspective: 800px;
3d旋转
有了透视的加持,我们3d旋转效果会比较明显。
rotateX
类似单杠旋转。
x轴旋转 正值是从上往下翻 负值是从下往上翻
注意:默认的旋转中心在盒子的中心位置。
body {
/* 父级添加透视 */
perspective: 400px;
}
img {
transition: all 1s;
}
img:hover {
transform: rotateX(360deg);
}
rotateY
类似钢管舞。
y轴旋转 正值是从左往右翻 负值是从右往左翻
body {
perspective: 400px;
}
img {
transition: all 1s;
}
img:hover {
transform: rotateY(360deg);
}
rotateZ
z轴旋转 在转圈
旋转的综合写法
transform: rotate3d(1, 1, 1, 360deg);
立体呈现
开启3d效果
让子盒子在父盒子内有空间的展示,此时可以给父亲添加
transform-style: preserve-3d;
动画
动画属性
动画animation:动画名 动画执行时间 动画速度 动画的延迟时间 动画执行次数 动画方向 执行完毕时状态
-
动画名字参照css类选择器命名
-
动画时长和延迟时间别忘了带单位 s
-
infinate 无限循环动画(重复次数)
-
alternate 为反向 就是左右来回执行动画(跑马灯)
-
forwards 动画结束停留在最后一帧状态, 不循环状态使用
-
linear 让动画匀速执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* 2,调用动画 */
animation: move 6s;
}
/* 1,定义一个动画 */
@keyframes move {
/* from 来自于哪里 */
/* 可以省略 */
from {
transform: translate(0, 0);
}
/* to 去往哪里 */
to {
transform: translate(1000px, 500px) rotate(360deg);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
鼠标经过暂停动画
/* 鼠标经过box, 则 ul 停止动画 */
.box:hover ul {
animation-play-state: paused;
}
多组动画
/* 我们想要2个动画一起执行 animation: 动画1, 动画2, ... 动画n */
animation: run 1s steps(12) infinite, move 5s linear forwards;
补间动画和逐帧动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.one {
/* 补间动画 */
animation: move 2s linear;
}
.two {
margin-top: 100px;
background-color: yellowgreen;
/* 帧动画 */
animation: move 2s steps(20);
}
@keyframes move {
100% {
transform: translate(400px, 0);
}
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>