css3-3d旋转

    1:属性选择器
    2:结构伪类选择器
    3:伪元素选择器
    4:2d转换
    5:动画
    6:3d转换
    7:浏览器私有前缀
        1:为了兼容老版本的写法,比较新的浏览器无需添加;
        2:分类
            1:-moz-:firfox浏览器私有属性
            2:-ms-:ie
            3:-webkit-:safari,chrome
            4:-o-:opera
        3:提倡写法:
            -moz-broder-radius:10px;
            -webkit-broder-radius:10px;
            -o-broder-radius:10px;
            broder-radius:10px;

    3d转换:
        1:特点:
            1:进大远小;
            2:物体遮挡后面看不见;
        2:三维坐标系:
            x向右
            y向下
            z垂直屏幕,往外是正直
        3:3d位移和3d旋转学习:

         注意:1:先声明transXY,在声明rotate();
              2:transZ()与rotate不影响,顺序无关先后;

            1:3d位移:
                transform: translateX(10px);
                transform: translateY(10px);
                transform: translateZ(10px);
                transform: translate3d(10px, 10px, 10px);(xyz不能省略,如果不要就写0;)
                    1:一般用px单位
                    2:必须借助透视才能起到效果;
                    3:沿着z轴移动
            2:透视perspective:(很重要)
                1:如果想要产生3d效果图,则需要用到perspective;
                2:透视单位是px;数值越小效果越明显;
                3:写在被观察元素的father上面;
            3:rotate3d(x,y,z);
                transform: rotateX(45deg);//沿着X轴旋转
                transform: rotateY(45deg);//沿着Y轴旋转
                transform: rotateZ(45deg);//沿着Z轴旋转 可以做做大转盘的转动效果

                transform: rotate3d(1, 0, 0, 45deg);//沿着自定义旋转,deg为角度(了解即可)
                    轴的方向跟矢量有关
                旋转方向:左手准则:大拇指指向X,Y轴的方向,四个手指握的方向就是要旋转的方向;
            4:3d呈现:transform-style:
                1:默认为:flat;子元素不开启3d效果
                2:preserve-3d,子元素开启3d效果//保持的意思,子元素保持3d效果
                3:代码写给直接父级,影响子元素盒子
                4:该属性很重要
            5:实战:
                1:两面翻转盒子的实现
                    .secbox {
                        position: relative;
                        width: 200px;
                        height: 200px;
                        margin: auto;
                        transition: all .4s;
                        transform-style: preserve-3d;
                    }

                    .secbox :first-child ,
                    .secbox :last-child{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 200px;
                        height: 200px;
                        line-height: 200px;
                        text-align: center;
                        border-radius: 50%;
                    }

                    .secbox :first-child {
                        background: skyblue;
                        /*transform: ;*/
                        z-index: 1;
                    }

                    .secbox :last-child {
                        background: purple;
                        transform: translateZ(1px) rotateY(180deg) ;
                    }

                    .secbox:hover {
                        transform: rotateY(180deg);
                    }
                2:3d导航栏:
                    ul li {
                        width: 120px;
                        height: 100px;
                        list-style: none;
                        perspective: 500px;
                    }

                    ul li .box {
                        position: relative;
                        width: 100%;
                        height: 100%;
                        transition: all .4s;
                        transform-style: preserve-3d;

                    }

                    ul .box :first-child ,
                    ul .box :nth-child(2){
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        line-height: 100px;
                        text-align: center;
                    }

                    ul .box :first-child {
                        background: pink;
                        z-index: 1;
                        transform: translateZ(50px);
                    }

                    ul .box :nth-child(2) {
                        background: purple;
                        transform: translateY(50px) rotateX(-90deg);
                    }

                    .box:hover {
                        transform: rotateX(90deg);
                    }

                3:旋转木马: