CSS3（四）

3D :

transform-style: 容器是否为3D
preserve-3d; 3D场景
flat; 2D场景

        translate()  偏移 
        translateZ()   沿Z轴偏移
        transform:translate3d(X,Y,Z);

        transform :rotate()旋转
                        默认是沿Z轴
                        transform:rotateZ()
                        transform:rotate3d( )
                        trans form : rotate ( 2turn)  1turn=36edeg 
                                   turn   圈  

3D缩放
transform:scale3d(X，Y，Z)
transform:scaleZ(s)
scaleZ(s)
s :指定元素每个点在Z轴的比例。scaleZ()和scale3d()函数单独使用时没有任何效果。
scale3d(sx,sy,sz)
sx :横向缩放比例;
sy :纵向缩放比例;
sz : Z轴缩放比例;
transform:scale3d(1,0.5,1.3);

动画：

两部分
    1:关键帧
     @-webkit-keyframes mymove{
        /* from {}
        to {} */
        0%{}
        20%{}
        ...
        100%{}
    }
    /* @-moz-keyframes mymove{
        from {}
        to {}
    }
    @-o-keyframes mymove{
        from {}
        to {}
    }
    @-ms-keyframes mymove{
        from {}
        to {}
    }
    2:调用动画
    animation
        animation-name  动画的名称
        animation-duration  动画执行的时间
        animation-timing- function  动画执行的方式
        animation-delay 动画延迟的时间
        animation- iteration-count  动画是否循环
                                    infinite    无限循环
                                    value   循环的次数
        animation-direction 动画的运动方向
                            reverse 反向运动
                           alternate  来回交替
                           alternate-reverse  反向来回交替
        animation-play-state  动画是否暂停
                              paused 暂停运动
                              running  默认值 动画运动

animation和transition的区别
相同点:都是随着时间改变元素的属性值。
不同点:
transition需要事件触发(hover事件或click事件等)

Backface-visibility背景不可见
说明:定义当元素不面向屏幕时是否可见。

如果在旋转元素不希望看到其背面时,该属性很有用。

Backfacevisibilty:isible;可见<bτ
Backface-visibility:hidden;不可见