如何防止孩子继承3d变换CSS3？
我有一个父 div 和一个子 div，现在我想让父 div 使用 3d 变换，而子 div 保持在前面。
Example:
.parent {
transform: rotateX(33deg) rotateY(66deg) rotateZ(99deg);
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 4px solid darkblue;
}
.child {
position: absolute;
width: 80px;
height: 80px;
background: aqua;
}
<div class="parent">
<div class="child">
I'am a child want keep front.
</div>
</div>
设置反向旋转或设置无变换均无效。
.parent {
transform: rotateX(33deg) rotateY(66deg) rotateZ(99deg);
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 4px solid darkblue;
}
.child {
transform: rotateX(-33deg) rotateY(-66deg) rotateZ(-99deg);
position: absolute;
width: 80px;
height: 80px;
background: aqua;
}
<div class="parent">
<div class="child">
I'am a child want keep front.
</div>
</div>
首先，您应该通过 set 将父级的子级定位在 3D 空间中transform-style: preserve-3d;在父级中，那么您可以在中应用变换函数reverse想要保持在前面的父元素到子元素的顺序。
.parent {
transform: rotateX(33deg) rotateY(66deg) rotateZ(99deg);
/* Notice! You should make the children of the parent positioned in the 3D-space. */
transform-style: preserve-3d;
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 4px solid darkblue;
}
.child {
/* Notice! You should apply the opposite order of rotations (transform functions) from the parent element. */
transform: rotateZ(-99deg) rotateY(-66deg) rotateX(-33deg);
position: absolute;
width: 80px;
height: 80px;
background: aqua;
}
<div class="parent">
<div class="child">
I'am a child want keep front.
</div>
</div>
TL;DR
为什么我们应该使用reverse order?
根据变换函数 - CSS：级联样式表 | Transform-function - CSS：层叠样式表MDN https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function :
使用变换函数矩阵乘法按从右到左的顺序组合，矩阵乘法不满足交换律，所以我们应该使用reverse为了抵消父母的转变。
例子：
let rotateX(33deg) = matrixA, rotateY(66deg) = matrixB, rotateZ(99deg) = matrixC
我们可以得到rotateX(-33deg) = matrixA^-1, rotateY(-66deg) = matrixB^-1, rotateZ(-99deg) = matrixC^-1 (See: 可逆矩阵 - 维基百科 https://en.wikipedia.org/wiki/Invertible_matrix, 旋转矩阵 - 维基百科 https://en.wikipedia.org/wiki/Rotation_matrix#In_two_dimensions)
我们可以计算孩子的点，与父母一起旋转rotatedPoint = originPoint * matrixA * matrixB * matrixC.
我们想让这些点位于其原点位置，所以我们应该这样做resultPoint = rotatedPoint * matrixC^-1 * matrixB^-1 * matrixA^-1因为矩阵乘法不满足交换律.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
