CSS复习

1.过渡效果

ransition: 要过渡的属性 花费的时间 运动曲线 何时开始、

2.2D移动 旋转 缩放

translate不会影响其他元素的位置 transform: translate(x,y); 在x轴和y轴上面移动位置

transform: translateX(50%)参照的是自己的数据

移动对于行内内元素无效

旋转 transform: rotate(360deg);

设置旋转中心点（ 设置旋转中心点 可以是方位名词 可以是百分比 也可以是像素）

transform-origin: 50% 50%;

缩放transform: scale(x, y)里面填写的是倍数

3.动画

1.定义动画 @keyframes 动画名{ 0%{} 100%{}}

2.使用动画 animation: name duration timing-function delay iteration-count direction fill-mode;

动画暂停（默认是running）animation-play-state: paused;

4.3D

1.3D移动

transform: translate3d（x,y,z）或者 transform: translateX（x） transform: translateZ(z)

2.3D旋转（遵循左手法则）

transform: rotate3d(x,y,z,deg) 或者transform: rotateX(deg)

3.透视 和 3D呈现

3D离不开perspective和transform-style: preserve-3d;