CSS3动画属性有哪些

标签：margin   center   变换   添加   hidden   pre   ack   cti   style   

CSS3-2D（二维平面空间）

1.CSS3-2D变形：

变形属性：transform;

变形属性属性值：

1. 在平面内进行位置的移动：transform:translate(value值1，value值2)    value值一般是以像素和百分比做单位，value值1：在X轴移动的距离，value值2：在Y轴移动的距离。参数的设置：如果是正值的情况下，方向往右往下，负值的话是往左往上。
2. 在平面内进行旋转：transform:rotate(value值1，value值2)     value值是以角度为单位，例如30deg.vlaue值1：绕着X轴旋转的角度，value值2：绕着Y轴旋转的角度。参数的设置是逆时针为正值，顺时针为负值。
3. 在平面内进行缩放：tansform:scale(value值1，value值2)      value值是以数值为单位，例如2.就是放大到两倍，0.5就是缩小到0.5倍，value值1是指宽width的放大与缩小，value值2是指height的放大与缩小。
4. 在平面内进行倾斜：transform:skew(value值1，value值2)         alue值是以角度为单位，例如30deg.vlaue值1：绕着X轴倾斜的角度，value值2：绕着Y轴倾斜的角度。
5. 2d变形原点：transfrom-origin：水平方向 垂直方向；例如transform:left center;2d变形原点为左上角；transform:20px 30px;则是变形原点为距离左20px,距离上30px。

注：这四个属性值都可以单独进行设置，例如transform：translateX(100px) translateY(200px); j就是在平面内往右移动100px，在平面内往下平移200px。

扩展：背景和背景图透明度设置，background：opacity(value值) value值范围：0~1.

2.CSS3-3D变形：

CSS3-3d景深：观察物体的一视角距离（近大远小）

perspective：1200px，一般在父元素添加。在子元素使用的时候是transform：perspective（1200px）

为了实现3D变形，首先要让平面形成一个3D空间，应该这样做：transform-style：preserve-3d。这样在这个元素的子元素就能在这个空间里实现3d变换。

3d的变换：

1. 3d的位移：transform：translate（X,Y,Z） 可以单独对其进行设置，transform:translateX（30px） translateY(50px) translateZ(60px);Z轴上设置是往自己面前就是正值，负值反之。注：和2d不一样的地方是单位不能为百分比。
2. 3d的旋转：transform::rotate3D(X,Y,Z)  记得是顺时针为负值，逆时针为正值。transform:rotateX(30deg) rotateY（40deg） rotateZ(50deg);
3. 3d的缩放：transform：scale3D(X,Y,Z)   3d的缩放：transform:scaleX(0.5) scaleY（2） scaleZ(2)。

扩展：当形成了3D空间时候的时候，使背面不可见：backface-visibility:hidden.

CSS3动画属性有哪些

标签：margin   center   变换   添加   hidden   pre   ack   cti   style   

原文地址：https://www.cnblogs.com/ygyg2028/p/12392086.html