2D
旋转变形rotate()
transform: rotate(45deg);
/* 旋转角度 */
角度为正顺时针转
transform-origin
设置变换原点
默认值transform-origin: 50% 50%;
绕图片中心转
transform-origin: 0 0;
/* 绕左上角旋转 */
缩放变形scale()
transform: scale(3);
/* 数值小于1表示缩小元素,大于1表示放大元素 */
斜切变形skew()
transform: skew(10deg,20deg);
/* x斜切角度y斜切角度*/
位移变形translate()
transform: translate (100px,200px);
/* 向右移动 向下移动*/
和相对定位非常像,位移变形也会“老家留坑”“形影分离”
3D
3D旋转
绕横轴转
transform: rotateX(30deg);
/* 往里为正 */
绕纵轴旋
transform: rotateY(30deg);
/* 往里为正 */
perspective
定义透视强度,理解为“人眼到舞台的距离”
单位:px
<!-- 舞台,必须设置perspective属性 -->
<div>
<!-- 演员,设置transform属性 -->
<p></p>
</div>
空间移动
添加在3D旋转之后
transform: rotateY(30deg) translateX(30px) translateZ(100px);
制作正方体
正方体每个面都是从舞台经过不同的3D旋转、空间移动到自己的位置过渡
过渡
优点:动画更细腻,内存开销小
4个属性
transition:width 1s linear 0s;
/* 什么属性要过渡 动画时长、变化速度曲线、延迟时间 */
可参与过渡的属性
1)所有数值类型的属性
比如width、height、left、top、border-radius
2)背景颜色和文字颜色
3)所有变形(包括2D和3D)都能被过渡
4)all属性,所有属性都参与过渡
缓动效果
缓动参数
transition的第三个参数就是缓动参数,也是变化速度曲线
常见的缓动参数
贝塞尔曲线
网站https://cubic-bezier.com/可以生成贝塞尔曲线,可以自定义动画缓动参数
3)过渡效果实战课