admin管理员组

文章数量:1122850

空间转换3D , 动画

1.3d转换

1.认识坐标系

 

X 轴 往右越大，是正值， 否则反之

Y 轴 往下越大，是正值，否则反之

Z轴 （指向我们）越大，是正值，否则反之

2.3D位移写法

完整写法

transform: translate3d(x, y, z);

分开写法

transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);

3.透视perspective的作用

透视的作用： 空间转换时，为元素添加近大远小、近实远虚的视觉效果

1. 取值范围经常在 800px ~ 1200px 之间。

2. 一定给父亲元素添加

3. 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

有了透视的加持，我们3d旋转效果会比较明显。

 perspective: 800px;

4.3D旋转rotate

默认的旋转中心在盒子的中心位置。

 body {/* 父级添加透视 */perspective: 400px;
}img {transition: all 1s;
}img:hover {transform: rotateX(360deg);
}

5.立体呈现

让子盒子在父盒子内有空间的展示，此时可以给父亲添加

 transform-style: preserve-3d;

2.动画

动画的最大特点是不用鼠标触发,自动的,反复执行某些动画.

1.定义动画

@keyframes dance {from {transform: scale(1)}to {transform: scale(1.5)}
}

或者是

@keyframes dance {0% {transform: scale(1)} 100% {transform: scale(1.5)}}

2.调用动画animation

img {width: 200px;/* 2. 使用动画  animation: 动画名称 执行时间;   infinite 循环*/animation: dance .5s infinite;
}

3.动画属性

 

1. 动画名字参照css类选择器命名

2. 动画时长和延迟时间别忘了带单位 s

3. infinate 无限循环动画（重复次数）

4. alternate 为反向 就是左右来回执行动画（跑马灯）

5. forwards 动画结束停留在最后一帧状态， 不循环状态使用

6. linear 让动画匀速执行

4.鼠标经过暂停动画 

/* 鼠标经过box，  则 ul 停止动画 */
.box:hover ul {animation-play-state: paused;
}

5.多组动画

/* 我们想要2个动画一起执行  animation: 动画1, 动画2, ... 动画n */
animation: run 1s steps(12) infinite, move 5s linear forwards;

本文标签： 空间转换3D动画