尝试获得像此处显示的第一个框那样的翻转效果 http://css3playground.com/flip-card.php
虽然 atm 我得到的只是以下内容,当鼠标悬停在上面时,会闪烁一种阴影
这是我使用的代码...
HTML:
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="images/eventbox.png"/>
</div>
<div class="back face center">
<p>This is nice for exposing more information about an image.</p>
<p>Any content can go here.</p>
</div>
</div>
</div>
还有 CSS:
#f1_container {
position: relative;
margin: 10px auto;
width: 350px;
height: 250px;
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);
box-shadow: -5px 5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
}
任何帮助都会很棒。
最佳答案
你是那个意思。按照你喜欢的方式调整。
#f1_container {
position: relative;
margin: 10px auto;
width: 350px;
height: 250px;
z-index: 1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#f1_container:hover {
perspective: 1000;
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
关于HTML/CSS3 翻转图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15729670/