一、浏览器坐标系
从左到右的方向是浏览器x轴的正方向;
从上到下的方向是浏览器y轴的正方向;
z轴正方向是面对于我们的;
浏览器坐标系
二、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); // 即往前或往后(放大缩小)，另外效果也受到景深的影响案例: 立体矩形
案例: 轮播图(立体切换效果)
-
rotateX()让元素绕着x轴旋转，角度越大，元素绕着x轴顺时针旋转rotateX类似秋千运动
rotateX类似秋千运动 -
rotateY()让元素绕着y轴旋转，角度越大，元素绕着y轴顺时针旋转 rotateY类似钢管舞运动
rotateY类似钢管舞运动 -
rotateZ()让元素绕着z轴旋转，角度越大，元素绕着z轴顺时针旋转 rotateZ类似于方向盘转动
rotateZ类似于方向盘转动
三、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%的状态开始执行案例: 无缝滚动
