CSS3动画-改变动画元素的“底部”图像
CSS3动画-改变动画元素的“底部”图像
提问于 2015-11-06 14:59:10
我使用CSS3动画有一个门元素在悬停打开。如果您查看下面的url：http://www.superfreebingo.com/advent-lp/
当您悬停在框上时，css动画将开始显示下面的内容。
我想修改一下打开的门的“底面”，你会注意到你刚刚看到正面的图像是相反的。
会不会是在背景图像本身上给另一个动画计时，以与门的“翻转”点重合呢？
Stack Overflow用户
回答已采纳
发布于 2015-11-06 18:51:37
所以你要找的是backface-visibilty。将其设置为.box img。
现在添加一个元素在下面，这个图像，这里我刚刚添加了一个pseudo-element，用z-index: -1;定位它。
您还可以将div或image设置为.box的子级，效果也很好。
/* CSS needed for your affect */
.box img {
backface-visibility: hidden;
}
.box::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #FF0;
z-index: -1;
}
/* Rest of the markup */
article {
display: inline-block;
width: 6em;
height: 6em;
margin: .5em;
perspective: 850px;
}
article:hover .box {
transition: .5s ease-in;
transform: rotateY(-97deg);
transform-origin: 0 50%;
perspective-origin: 0;
}
.box {
position: relative;
transition: all .3s;
transform-origin: 0 50%;
text-align: center;
background-size: cover;
box-shadow: 0 0 40px 0 rgba(0, 0, 0, .15);
transform-style: preserve-3d;
perspective: 850px;
cursor: pointer;
}
.box, .present {
width: 100%;
height: 100%;
}
.box img, .present img {
width: 100%;
height: 100%;
}
.present {
position: absolute;
z-index: -1;
top: 0;
left: 0;
box-shadow: 0 0 40px 0 rgba(0, 0, 0, .15), inset 0 0 30px 20px rgba(0, 0, 0, .4);
}
.present a {
display: block;
width: 100%;
height: 100%;
}<article>
<div class="box">
<img src="http://i.stack.imgur.com/wheDD.jpg">
</div>
<div class="present">
<a href="#">
<img src="http://i.stack.imgur.com/EXU8x.jpg">
</a>
</div>
</article>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33569598
复制相关文章
相似问题
腾讯云开发者
