Css3属性

标签：前缀   方法   number   参数   nim   hid   缩小   mes   ati   

Css3中的过渡属性：transition

　　　　注意事项:

　　　　　　　　1:时间要加单位

　　　　过度属性：

　　　　　　　　1：属性名称 transition-prorperty

　　　　　　　　2：时间：transition-duration

　　　　　　　　3：速度：traisition-timing-function

　　　　　　　　4：延迟：transition-delay

C3里面的属性简写类似于background的简写

animation：动画    添加动画要写@keyframe前缀

　　　　动画属性：

　　　　　　　　动画名称   用于@keyframes anmiation-动画名称

　　　　　　　　动画完成的周期：animation-duration

　　　　　　　　规定动画的速度曲线：animation-timing-function

　　　　　　　　规定当动画不播放时，要应用到元素的样式：animation-fill-mode

　　　　　　　　规定动画何时开始：animation-delay

　　　　　　　　规定动画播放的次数：animation-iteration-count

　　　　　　　　规定动画是否在下一周期逆向的播放：animation-direcition

　　　　　　　　规定动画是否正在运行或暂停：animation-play-state

2D和3D

　　transform：2D和3D转换的元素

　　C3中的3d和2d特效都是方法

　　transform:translate()：平移，两个参数在x轴平移的距离    在y轴平移的距离  ，translateZ()　　在z轴平移的距离

　　　　transform：rotate()：旋转，参数是number deg（角度）　　rotateX()　　x轴旋转   (依此类推)

　　　　transform：scale()：缩放，两个参数（5）x/y都是5倍   （5，1）　　x是5倍，y是1倍；（放大）　　（.3）　　缩小

　　　　transform：skew()：拉伸，两个参数 （xdeg，ydeg）；

　　　　注意：transform属性，只能应用于简写，不能分开写，否则后者将会覆盖前者； 

3d的原理：近大远小；

　　　　视距：物体于视网膜的距离

　　　　-webkit-perspective：透镜（视距）(一定要加前缀)(这个属性必须加在父级的元素上面且尽量不要写在body上)　　flat(2d);

　　　　-webkit-transform-style:preserve-3d;     （内部子元素成3d效果）

　　　　如果该元素有3d的效果：perspective的视距给他的父级元素；

　　　　transform-origin（）　　两个参数，旋转位置的修改；让内部的子元素跟父级3d

　　　　backface-visibility:hidden;　　元素不面对屏幕时是否可见；

Css3属性

标签：前缀   方法   number   参数   nim   hid   缩小   mes   ati   

原文地址：https://www.cnblogs.com/wkxdd/p/10554888.html