标签：preserve style transform 300px div 3d

前言

今天仿制了一个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;
}

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

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

本文就到这里了。

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

标签：preserve,style,transform,300px,div,3d
来源： https://blog.csdn.net/Cristiano2000/article/details/122388440

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。