9.27前端笔记

一、transform-style属性
       创建网页3d空间
            transform-style:preserve-3d;
        注意：不能与overflow属性一起使用
            overflow: hidden;
            overflow: auto;
            overflow: scroll; 

        当子元素和父元素都有3d（x y z）效果，给父元素设置transform-style:preserve-3d;

二、3d位移

        transform: translate3d(x,y,z);
            transform: translate3d(100px,200px,400px);

三、3d缩放
       
        缩放
         transform:scalez()沿着z轴方向缩放（厚度）
         transform：scale3d（）沿着x、y、z轴方向缩放
        取值
         默认值为1
         使用0~1之间的值缩小元素
         使用超过1的值放大元素
         注意：scalez单独使用看不到效果，需要配合其他变换属性一起使用

四、3d旋转

          3d函数 
           transform: rotate3d(x,y,z,deg);
            xyz取值：0-1  矢量的值 
            deg 度数

         绕多轴旋转
            x：1*60=60
            y：1*60=60 0.5*60=30
            z：1*60=60
       
            transform: rotate3d(1,1,1,60deg);
            transform: rotate3d(1,0.5,1,60deg);

        
            绕x轴旋转
             x:1*60 = 60
             y:0*60 = 0  
             z:0*60 = 0
        
            /* x */
            transform: rotate3d(1,0,0,60deg);
            /* y */
            transform: rotate3d(0,1,0,60deg);
            /* z */
            transform: rotate3d(0,0,1,60deg);

        绕两个轴旋转
            /* x z */
            transform: rotate3d(1,0 1,60deg);
            /* x y */
            transform: rotate3d(1,1,0,60deg);
            /* y z */
            transform: rotate3d(0,1,1,60deg);