源码在这里可以看到

景深

刚突然知道css3里面竟然有景深这么一个好玩的api，然后就拿出来试了下。

perspective:pxNum 景深
perspective-origin:left | top 属性定义 3D 元素所基于的 X 轴和 Y 轴

3.gif

div
{
perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */
perspective-origin:20% 30% 
}

需要注意的是 这个属性是给3d转换的dom容器加的，而不是给某一个具体的3d转换的dom加的。

translate里属性的执行顺序

属性书写的先后顺序不同，也会造成最终的表现形式不同
结论就是写在后面的先执行。

2.gif

<div class="div1">
    <div class="body" data-dom="1"></div>
</div>
<div class="div1">
    <div class="body"data-dom="2"></div>
</div>
 
this.style.transform = 'scale(.5) translateX(50px)';

this.style.transform = 'translateX(50px) scale(.5)';

translateX等虽然让元素发生了位移，但是是不会改变元素的中心点

1.gif

this.style.transform = 'rotate(180deg) translateX(50px)';

this.style.transform = 'translateX(50px) rotate(180deg)';

transform-origin

区别于景深，它是作用于变换的dom上
rotate scale skew 其实是围绕transform-origin指定的位置进行转换的，之所以看起来是围绕中心点，是因为center是这个css的默认值而已

4.gif

.body{
    width:100px;
    height:100px;
    background:red;
    transition:1s;
}
.body1_1{
   transform-origin: left top;
}
<div class="div div1">
    <div class="body body1 body1_1" data-dom="1"></div>
</div>
<div class="div">
    <div class="body body1"data-dom="2"></div>
</div>

transform-origin

这个css其实有第三个参数，是用来设置translate3d的变换原点

5.gif

.body2_1{
     transform-origin:center center -30px;
}

<div class="div">
    <div class="body body2" data-dom="1"></div>
</div>
<div class="div">
    <div class="body body2 body2_1"data-dom="2"></div>
</div>

this.style.transform = 'rotateX(180deg)';

transform-style

是否保留子元素（不是子孙元素）的3d变化（是否是真3d空间）

6.gif

.body3_1{
     transform-style: preserve-3d;
         /**flat 不保留**/
}
.body3_body{
     width:100px;
     height:100px;
     background:#0ff;
     transform: rotateX(45deg);
}

<div class="div">
    <div class="body body3" data-dom="1">
        <div class="body3_body"></div>
    </div>
</div>
<div class="div">
    <div class="body body3 body3_1"data-dom="2">
        <div class="body3_body"></div>
    </div>
</div>

this.style.transform = 'rotateY(180deg)';

以上均是看妙味课程后的笔记。 妙味大法好！