如何防止孩子继承3d转换CSS3？ [英] How to prevent children from inheriting 3d transformation CSS3?

问题描述

如何防止孩子继承3d转换CSS3？

How to prevent children from inheriting 3d transformation CSS3?

我有一个父div和一个子div，现在我想让父母使用3d转换和孩子div保持领先。

I have a parent div and a child div, now I want to let parent using 3d transformation and the child div keep front.

示例：

.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>

推荐答案

首先，应通过在父级中设置 transform-style：preserve-3d; 来使父级的子级位于3D空间中可以按父级的反向顺序将转换功能应用于要保持领先地位的子级元素。

First you should make the children of the parent positioned in the 3D-space by set transform-style: preserve-3d; in parent, then you can apply transform-functions in reverse order of parent to children elements that want to keep front.

.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

为什么应该使用反向订单？

根据转换功能-CSS：级联样式表| MDN ：

使用矩阵乘法组合的变换函数从右到左顺序排列，而矩阵乘法不满足交换律，因此我们应使用逆向命令来抵消父项的变换。

Transform-functions using matrix multiplication combin in order from right to left, and matrix multiplication doesn't satisfy the commutative law, so we should use reverse order to counteract parent's transforms.

示例：

let rotateX（33deg）=矩阵A，rotateY（66deg）=矩阵B，rotateZ（99deg）=矩阵C

我们可以得到 rotateX（-33deg）= matrixA ^ -1，rotateY（-66deg）= matrixB ^ -1，rotateZ（-99deg）= matrixC ^ -1 （请参阅：可逆矩阵-维基百科，旋转矩阵-维基百科）

We can get rotateX(-33deg) = matrixA^-1, rotateY(-66deg) = matrixB^-1, rotateZ(-99deg) = matrixC^-1 (See: Invertible matrix - Wikipedia, Rotation matrix - Wikipedia)

我们可以计算 rotatedPoint = originPoint * originA * matrixA * matrixB * matrixC 与父母一起旋转的点。

We can calculate the points, rotate with parent, of children rotatedPoint = originPoint * matrixA * matrixB * matrixC.

将这些点放在其原点位置，因此我们应该执行 resultPoint = rotationPoint * matrixC ^ -1 * matrixB ^ -1 * matrixA ^ -1 ，因为矩阵乘法不满足减法。

We want to make those points in its origin position, so we should do resultPoint = rotatedPoint * matrixC^-1 * matrixB^-1 * matrixA^-1 because matrix multiplication doesn't satisfy the commutative law.

这篇关于如何防止孩子继承3d转换CSS3？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！