transform-style: preserve-3d「In CSS」

前言

今天仿制了一个3D反转的CSS动画，遇到了 transform-style 这个属性。

我们先来看看菜鸟教程和W3School对这个属性的介绍：

很显然，身为菜鸡的我，看不懂这两个介绍，依旧一头雾水。

再来看看 C 站上的诸多博客，好吧，我放弃了，全是代码，一张效果图都没有，云里雾里的。

所以我自己写一篇记录一下吧

结论

transform-style有两个值 flat 与 preserve-3d，flat 为默认值。

那么在开始前，给出我的结论：

transform-style: preserve-3d 能使在同一位置的元素中心点交汇。自然 flat 值就是不能够交汇咯。

下面依次描述。

为什么是同一位置？

 先弄个案例出来。

<div class="box1">
    <div class="box2"></div>
    <div class="box3"></div>
</div>

* {
    margin: 0;
    padding: 0;
}
        
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: gray;
}
        
div.box1 {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    position: relative;
}
        
div.box2 {
    width: 300px;
    height: 300px;
    background-color: blue;
}
        
div.box3 {
    width: 300px;
    height: 300px;
    background-color: green;
}

对他们各自进行3d旋转。效果是这样的：

div.box2 {
    transform: rotate3d(1, -1, 0, 89deg)
}
        
div.box3 {
    transform: rotate3d(1, 1, 0, 89deg);
}

即使给父元素加上 transform-style: preserve-3d 效果也是不变的。

div.box1 {
    transform-style: preserve-3d;
}

所以说，元素在不同位置上进行3d变换（旋转等）， 不会受 transform-style: preserve-3d 影响。

中心点交汇

为box1下的box3设置绝对定位，使得与box2在同一位置。

保持上面的3d旋转角度不变。

div.box1 {
    position: relative;
}

div.box3 {
    position: absolute;
    top: 0;
    left: 0;
}

 就会是这个样子，看中心点那边，实际上绿色的块是在蓝色的块上面的。

如果将面当成立方体来看的话，侧面是这样的。绿色的整块压在蓝色的上面！

此时再给box1加上 transform: preserve-3d 属性。

div.box1 {
    transform-style: preserve-3d;
}

显然，他们的中心点交汇了。

把面当成立方体，从侧面看就是：

本文就到这里了。

觉得有帮助的记得点个赞再走！！