css3变形和动画

transform改变位置角度比例等。

可以接的函数有translate(x,y)改变位置原位置是0,0；rotate(xdeg)改变角度， scale(0.4)改变比例，skew(xdeg,ydeg)改变倾斜度，对于3d的变形有translateXYZ，rotateXYZ，scaleXYZ，其中值得注意的是rotate的3d版本和2d版本完全不同，3d版本是以这个轴为轴心旋转一定角度。2d则是绕着锚点旋转。 transform-origin锚点位置。参数为x，y。可以为像素也可以是百分数，还可以是ltrbc五个方向。

示例

无样式

transform:translate(100px,0) rotate(45deg) scale(.5)

transform:skewX(15deg)

transform-origin:默认/(left bottom)

transform-style

指定嵌套元素如何呈现，即设置在舞台元素。参数为flat默认和preserve-3d后者可以超出舞台展示3d。(实际测试是前者也可以原因不明)

没有示例

因为测试出现了问题，大家自己测下

perspective

指定观看者的高度，用于舞台元素。同样的效果用在变形元素是接在transform属性后的perspective()函数。附属属性perspective-origin(x,y)指定高度的根。
即perspective属性用于舞台，perspective()函数用于演员

示例

transform:rotateX(40deg)

transform: perspective(300px) rotateX(40deg)

千万注意perspective()函数一定要是transform的第一个参数
第二个的效果和为这个div容器添加perspective属性效果一样

backface-visibility旋转后图片背面是否展示

如果展示则是镜面的。参数visible(默认)/hidden

示例

下面有两个对比图第二个因为hidden看不到了

transition指定形变过渡，产生动画

参数1.all/none/自己指定如颜色、位置等 2.执行时间 3.动画函数 4.延时。常用的为前三个

注意直接写在style中，页面加载后就是执行完的结果，过渡一般用在触发伪类:hover:action或者Js中添加css

示例

 #transition:hover{

                    transition: all 2s ease-in;

                    transform:rotate(20deg)
                    }

鼠标悬浮会旋转，也可以通过JS设置事件触发时addClass/toggleClass或者attr('class','xx')

animation自定义动画

参数1帧动画名 2执行时间 3动画函数 4延时 5循环次数 6播放的方向 …后面还有几个参数但不常用。关于帧动画@keyframes name{0%{css}60%{css}100%{css}}这种形式，css可以写css代码如颜色变化，形变等。

示例

 #animate{
                    animation: name 3s ease-in infinite alternate;
                    }

                    @keyframes name {
                    0%{
                    background: white;
                    }
                    100%{
                    background: red;
                    }
                    }

注意alternate是偶数次正向播放奇数次反向播放

transform改变位置 角度 比例等。

示例