看不懂这个 CSS 代码答案

【问题标题】：Can't understand this CSS code看不懂这个 CSS 代码
【发布时间】：2023-03-28 23:57:01
【问题描述】：

我买了一个 HTML/CSS 模板。在浏览 CSS 文件时，我看到这段代码让我很困惑。

.team-member .details, .team-member .details {
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.team-member .details {
    -webkit-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateY(-180deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
}
.team-member .details {
    -webkit-transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateY(180deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
}
.team-member .details {
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transition: all .35s ease;
    -moz-transition: all .35s ease;
    -ms-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
}

为什么要反复使用同一个类？
订单重要吗？
transform-style:preserve-3d 有什么作用？
为什么要使用带不透明度的前缀？

【问题讨论】：

标签： html css transform transition

【解决方案1】：

为什么要反复使用同一个类？

这段代码中没有实际的理由。

可能有一些 JavaScript 可以动态启用和禁用 CSS 中的规则，但您没有包含它。

顺序重要吗？

在设置不同的属性时（或规则相同时）不会。 (spec)。

当一个属性被设置为不同的规则，并且具有相同的特异性时，最后一个规则将适用。

transform-style:preserve-3d 有什么作用？

它是“Indicates that the children of the element should be positioned in the 3D-space。” （而不是被压扁到他们的父母身上）

为什么要使用前缀不透明度？

在 opacity 属性是实验性的（这在 2015 年毫无意义）的浏览器中启用半透明。

【讨论】：

【解决方案2】：

我不能确定为什么重复相同的规则 (.team-member .details)，但一个可能的原因是与解析有关；如果浏览器无法识别某些 CSS 属性，它可能会跳过该属性并执行下一个。但是，某些复杂的属性可能会导致它跳过整个规则。这些规则也有可能是从某个构建器程序生成的。

在最后一个获胜的意义上，顺序很重要。如果我的浏览器找到-mybrowser-prop: 3，然后找到prop: 5，并且支持不带前缀的“prop”，它将覆盖第一个属性。如果 W3C 标准属性的行为得到更好的定义，那可能是最好的（浏览器早期实现的属性可能与您不想要的“最终”有所不同）

Preserve-3D 有点像元素子元素的“position: relative”和“position: absolute”之间的定位差异，但用于旋转/变换。如果你能找到它的一些图形，它可能会以视觉方式得到最好的展示。

自动扩展前缀的自动化 CSS 构建器是其中一些前缀的唯一解释。太多会使您的代码混乱，并且所有浏览器都支持不带前缀的 opacity 属性。

【讨论】：