一、3D变换
transform-style建立3D空间
transform-style: preserve-3d;
perspective 景深
perspective: 300px;
perspective- origin 景深基点
// 即站在那个方位看物体，默认是center center // left top即左上角位置看物体 perspective-origin: left top;
transform 新增函数
- rotateX() - rotateY() - rotateZ() - translateZ() transform: rotateX(360deg); transform: rotateY(360deg); transform: rotateZ(360deg); // 即是旋转效果 transform: translateZ(-100px); // 即往前或往后(放大缩小)，另外效果也受到景深的影响
注: Z轴方向即是垂直于窗口的；
案例: 立体矩形
案例: 轮播图(立体切换效果)
二、animation动画
关键帧——keyFrames
- 类似于flash
只需指明两个状态，之间的过程由计算机自动计算
- 关键帧的时间单位
数字：0%、25%、100%等
字符：from(0%)、to(100%)
- 格式1 @keyframes 动画名称
{ 动画状态 } #box{
// 动画时长、动画名称
animation: 2s Move;
}
@keyframes Move{ 0%{
width: 100px;
} 100%{
width: 400px;
}
} #box{
// 动画时长2s、延迟3s、动画名称
animation: 2s 3s Move;
}@keyframes Move{
from{
width: 150px;
background: blue;
}
to{
width: 300px;
background: purple;
}
}animation-timing-function 动画运动形式
- linear 匀速 - ease 缓冲 - ease-in 由慢到快 - ease-out 由快到慢 - ease-in-out 由慢到快再到慢 - cubic-bezier(number, number, number, number) 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
animation-delay 动画延迟
只是第一次
animation-iteration-count 重复次数
infinite为无限次
animation-play-state 播放状态
- running 播放 - paused 暂停
animation-direction 播放前重置
动画是否重置后再开始播放 - alternate 动画直接从上一次停止的位置开始执行 - normal 动画第二次直接跳到0%的状态开始执行
案例: 无缝滚动
作者：EndEvent
链接：https://www.jianshu.com/p/a9a16f139167