我正在尝试装配我在Webkit中找到的一个演示,它应该在一个帧的一侧有一个图像并翻转到另一个图像。相反,webkit决定向我展示双方的背面图像,镜像。非常感谢任何帮助!
小提琴:http://jsfiddle.net/sH2jZ/
CSS:
#f1_container {
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
z-index: 1;
}
#f1_container {
perspective: 1000;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
box-shadow: -5px 5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
box-sizing: border-box;
color: white;
text-align: center;
background-color: #aaa;
}
HTML:
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg"/>
</div>
<div class="back face center">
<img src="http://blog.roblox.com/wp-content/uploads/2012/09/Mac-OS-X-10.5-Leopard.png" height="281" width="450" />
</div>
</div>
</div>
答案 0 :(得分:3)
您的-webkit-
个相关陈述错过了transform
个版本:
#f1_container {
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
z-index: 1;
}
#f1_container {
perspective: 1000;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: all 1.0s linear;
-webkit-transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
box-shadow: -5px 5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
box-sizing: border-box;
color: white;
text-align: center;
background-color: #aaa;
}