我不明白这一点,这似乎是一个错误,但它在多个浏览器中都是一致的。所以这个bug一定是在我自己的脑子里。
基本上,我已经得到了带有图像和一些文本的 block 。 该 block 内的标题由多个 span 元素组成,其中包含每个字符。我想将它们淡入,不透明度从 0 到 1,并在悬停时将它们移动约 30 像素,每个跨度略有延迟。这没有问题。但由于某种原因,似乎只有不透明度起作用,而translate3d不起作用。
我有一个 jsfiddle 来描述它: https://jsfiddle.net/w5Lgdgt9/5/
HTML:
<div class="tiles-wrapper">
<article class="tiles-block">
<a href="">
<img src="https://orig06.deviantart.net/91ee/f/2008/209/1/9/cat_stock_002_by_pc_stock.jpg">
<h3>
<span>L</span>
<span>o</span>
<span>r</span>
<span>e</span>
<span>m</span>
<span></span>
<span>i</span>
<span>p</span>
<span>s</span>
</h3>
</a>
</article>
</div>
CSS:
.tiles-wrapper {
position: relative;
overflow: hidden;
}
.tiles-block {
width:100%;
}
img {
width: 100%;
transition: transform .9s ease;
transform: scale(1);
}
span {
position: relative;
transition: opacity .3s, transform .3s ease;
opacity: 0;
transform: translate3d(0,-30px,0);
color:#000;
font-weight: bold;
}
h3 {
position: absolute;
left: 0;
top: 0;
width: 100%;
margin: 0;
text-align: center;
z-index: 1;
transition: opacity .3s ease, transform .3s ease;
opacity: 0;
transform: translate3d(0,40px,0);
padding: 70px;
font-size: 24px;
}
a {
display:block;
margin: 0;
position: relative;
}
h3 span:nth-of-type(1) {
transition-delay: .2s;
}
h3 span:nth-of-type(2) {
transition-delay: .4s;
}
h3 span:nth-of-type(3) {
transition-delay: .6s;
}
h3 span:nth-of-type(4) {
transition-delay: .8s;
}
h3 span:nth-of-type(5) {
transition-delay: 1s;
}
h3 span:nth-of-type(6) {
transition-delay: 1.2s;
}
h3 span:nth-of-type(7) {
transition-delay: 1.4s;
}
h3 span:nth-of-type(8) {
transition-delay: 1.6s;
}
h3 span:nth-of-type(9) {
transition-delay: 1.8s;
}
h3 span:nth-of-type(9) {
transition-delay: 2s;
}
a:hover span{
opacity: 1;
transform: translate3d(0,0,0);
}
a:hover h3 {
opacity: 1; transform: translate3d(0,0,0);
}
a:hover img{ transform: scale(1.1); }
抱歉,CSS 代码很糟糕,我通常使用 SASS,但无法让它在 jsfiddle 上工作。另外,不用担心转换内容上的前缀,gulp 会帮我处理这个问题,所以这不是问题。
最佳答案
发现,是因为span元素没有设置为inline-block。因为translate和translate3d仅适用于 block 元素。我傻了
关于CSS - translate3d 似乎没有做任何事情?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35392701/