Я не понимаю, это похоже на ошибку, но она совместима с несколькими браузерами. Так что ошибка должна быть в моей голове.CSS - translate3d, похоже, ничего не делает?
В принципе, у меня есть этот блок с изображением и некоторым текстом. Заголовок внутри этого блока состоит из нескольких элементов 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 позаботится об этом для меня, так что это не проблема.
Чтение вашего вопроса, возможно, вы хотите применить 'translate3d (0,0,0)' on' span: hover', а не 'a: hover span' https://jsfiddle.net/w5Lgdgt9/ 7/ –
Ваша проблема в том, что перевод происходит, когда элемент затухает. Таким образом, когда вы наведите указатель мыши, вы не видите много движения, потому что оно еще не появилось. Здесь нет ошибки –