无法理解此 CSS 代码

Question

我买了一个 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;
}

为什么一遍又一遍地使用同一个 class？
顺序重要吗？
transform-style: preserve-3d 有什么作用？
为什么使用不透明的前缀？

Answer 1

why is the same class used over and over ?

此代码中没有表达实际原因。

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

does the order matter ?

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

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

what does transform-style: preserve-3d do ?

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

Why use prefix with opacity ?

在不透明度属性处于试验阶段（在 2015 年毫无意义）的浏览器中启用半透明。

Answer 2

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

在最后一个获胜的意义上，顺序很重要。如果我的浏览器找到 -mybrowser-prop: 3，然后找到 prop: 5，并且支持无前缀 "prop"，它将覆盖第一个属性。如果更好地定义 W3C 标准属性的行为（浏览器对属性的早期实现可能与您不想要的 'final' 存在差异，那可能是最好的)

Preserve-3D有点像元素子元素的“position: relative”和“position: absolute”的定位差异，但是对于rotations/transformations。如果你能找到它的一些图形，它可能是最好的视觉演示。

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

无法理解此 CSS 代码

Can't understand this CSS code

html

css

transform

transition