我偶然发现了这个 惊人的CSS3 3D动画,并在以下浏览器中查看了它:
据我所知,在这些行上指定
然而,当我从这些选择器中去除
我在问题末尾提供了代码示例和对应的屏幕截图,展示了产生的伪影。在下面的代码中,我从
- Safari 9.0.1
- Chrome 47.0.2526.106
- Firefox 43.0.1
.strip .a
.strip .b
等等...据我所知,在这些行上指定
.strip
是过度限定CSS选择器,因为没有其他类似于.a
类、.b
类等等的情况引入任何歧义 - 在这种情况下,这些类名与id选择器几乎相同,因为每个类名只对应一个HTML标签。然而,当我从这些选择器中去除
.strip
(例如将选择器变为简单的 .a
、.b
等),相应的 CSS background-position
偏移似乎停止工作,那些行的图像条仅显示图像的前导矩形区域,而不是各自指定的背景位置偏移处的切片。在上述所有浏览器中结果都是相同的。我在问题末尾提供了代码示例和对应的屏幕截图,展示了产生的伪影。在下面的代码中,我从
.a
、.b
、.c
和 .d
行的选择器中去除了 .strip
。您可以在下面展示的图像中看到这四个条带似乎没有正确定位。
这是 Webkit、Mozkit 中的一个 bug 吗?还是我对关于这种选择器的 CSS 有所不理解?
body {
background: #000;
color: rgb(236, 132, 57)
}
h1 {
font: small-caps 167% Arial, Helvetica, sans-serif
}
#container {
text-align: center;
margin: 0 auto;
top: 450px;
width: 550px;
-moz-perspective: 900px;
-webkit-perspective: 900
}
#container:hover * {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused
}
#frame {
width: 33px;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d; /* translate must be last */
-moz-transform: rotateX(35deg) rotateY(45deg) rotateZ(15deg) translate3d(325px, -70px, 50px);
-webkit-transform: rotateX(35deg) rotateY(45deg) rotateZ(15deg) translate3d(325px, -70px, 50px)
}
.strip {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-animation: spin 25s infinite linear;
-webkit-animation: spin 25s infinite linear
}
.strip div {
position: absolute;
background: #000 url(http://baloziproductions.com/thailand-sunrise.jpg); /* background image is 792px 320px, try with green-hills or thailand-sunrise.jpg */
border: solid rgb(145, 87, 0);
border-width: thin 0;
height: 320px;
width: 34px;
opacity: 1;
}
.a {
background-position: 0 0;
-moz-transform: rotateY(0deg) translateZ(124px);
-webkit-transform: rotateY(0deg) translateZ(124px)
}
.b {
background-position: 759px 0;
-moz-transform: rotateY(15deg) translateZ(124px);
-webkit-transform: rotateY(15deg) translateZ(124px)
}
.c {
background-position: 726px 0;
-moz-transform: rotateY(30deg) translateZ(124px);
-webkit-transform: rotateY(30deg) translateZ(124px)
}
.d {
background-position: 693px 0;
-moz-transform: rotateY(45deg) translateZ(124px);
-webkit-transform: rotateY(45deg) translateZ(124px)
}
.strip .e {
background-position: 660px 0;
-moz-transform: rotateY(60deg) translateZ(124px);
-webkit-transform: rotateY(60deg) translateZ(124px)
}
.strip .f {
background-position: 627px 0;
-moz-transform: rotateY(75deg) translateZ(124px);
-webkit-transform: rotateY(75deg) translateZ(124px)
}
.strip .g {
background-position: 594px 0;
-moz-transform: rotateY(90deg) translateZ(124px);
-webkit-transform: rotateY(90deg) translateZ(124px)
}
.strip .h {
background-position: 561px 0;
-moz-transform: rotateY(105deg) translateZ(124px);
-webkit-transform: rotateY(105deg) translateZ(124px)
}
.strip .i {
background-position: 528px 0;
-moz-transform: rotateY(120deg) translateZ(124px);
-webkit-transform: rotateY(120deg) translateZ(124px)
}
.strip .j {
background-position: 495px 0;
-moz-transform: rotateY(135deg) translateZ(124px);
-webkit-transform: rotateY(135deg) translateZ(124px)
}
.strip .k {
background-position: 462px 0;
-moz-transform: rotateY(150deg) translateZ(124px);
-webkit-transform: rotateY(150deg) translateZ(124px)
}
.strip .l {
background-position: 429px 0;
-moz-transform: rotateY(165deg) translateZ(124px);
-webkit-transform: rotateY(165deg) translateZ(124px)
}
.strip .m {
background-position: 396px 0;
-moz-transform: rotateY(180deg) translateZ(124px);
-webkit-transform: rotateY(180deg) translateZ(124px)
}
.strip .n {
background-position: 363px 0;
-moz-transform: rotateY(195deg) translateZ(124px);
-webkit-transform: rotateY(195deg) translateZ(124px)
}
.strip .o {
background-position: 330px 0;
-moz-transform: rotateY(210deg) translateZ(124px);
-webkit-transform: rotateY(210deg) translateZ(124px)
}
.strip .p {
background-position: 297px 0;
-moz-transform: rotateY(225deg) translateZ(124px);
-webkit-transform: rotateY(225deg) translateZ(124px)
}
.strip .q {
background-position: 264px 0;
-moz-transform: rotateY(240deg) translateZ(124px);
-webkit-transform: rotateY(240deg) translateZ(124px)
}
.strip .r {
background-position: 231px 0;
-moz-transform: rotateY(255deg) translateZ(124px);
-webkit-transform: rotateY(255deg) translateZ(124px)
}
.strip .s {
background-position: 198px 0;
-moz-transform: rotateY(270deg) translateZ(124px);
-webkit-transform: rotateY(270deg) translateZ(124px)
}
.strip .t {
background-position: 165px 0;
-moz-transform: rotateY(285deg) translateZ(124px);
-webkit-transform: rotateY(285deg) translateZ(124px)
}
.strip .u {
background-position: 132px 0;
-moz-transform: rotateY(300deg) translateZ(124px);
-webkit-transform: rotateY(300deg) translateZ(124px)
}
.strip .v {
background-position: 99px 0;
-moz-transform: rotateY(315deg) translateZ(124px);
-webkit-transform: rotateY(315deg) translateZ(124px)
}
.strip .w {
background-position: 66px 0;
-moz-transform: rotateY(330deg) translateZ(124px);
-webkit-transform: rotateY(330deg) translateZ(124px)
}
.strip .x {
background-position: 33px 0;
-moz-transform: rotateY(345deg) translateZ(124px);
-webkit-transform: rotateY(345deg) translateZ(124px)
}
@-moz-keyframes spin {
from {
-moz-transform: rotateY(0)
}
to {
-moz-transform: rotateY(-360deg)
}
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotateY(0)
}
to {
-webkit-transform: rotateY(-360deg)
}
}
<div id="container">
<h1>Image Wrapped Around A Spinning strip</h1>
<div id="frame">
<div class="strip">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
<div class="h"></div>
<div class="i"></div>
<div class="j"></div>
<div class="k"></div>
<div class="l"></div>
<div class="m"></div>
<div class="n"></div>
<div class="o"></div>
<div class="p"></div>
<div class="q"></div>
<div class="r"></div>
<div class="s"></div>
<div class="t"></div>
<div class="u"></div>
<div class="v"></div>
<div class="w"></div>
<div class="x"></div>
</div>
</div>
</div>
.a
→#a
)。我对CSS特异性计算一无所知。CSS声明默认值的转化是一个元分析考虑因素,像您这样经验丰富的专家的分析是真正的教育发生的地方!特异性是如此基础和重要,以至于更多关于CSS的教程应该将这个主题放在最前面。补充信息:https://css-tricks.com/specifics-on-css-specificity/(文章末尾链接到更详细的背景信息)。 - clearlight