[英]CSS 3D Transform property
我正在使用CSS3转换属性创建“翻转”效果。
我在最新版本的Chrome,Firefox和Safari中运行良好,但恐怕很难为IE9和Opera建立某种后备,因为它们仅支持2d转换。
我创建了一个小提琴来显示当前正在使用的代码。
请在此处找到此链接: http : //jsfiddle.net/montyhog/SaYUe/9/
我并不一定要在这些浏览器中重新创建效果,而只是创建一个回退,当IMG1悬停时,IMG2会淡入顶部。
这是HTML:
<div class="h1older">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><img src="http://www.hogshouse.com/fbtest/img/cdartwork/meds.png" /></div>
<div class="back"><img src="http://www.hogshouse.com/fbtest/img/cdartwork/back.png" /></div>
</div>
</div>
</div>
和CSS:
.h1older {
width: 400px;
height: 400px;
border: 1px #ff00d5 dashed;
position: absolute;
top: 0px;
left: 0px;
}
.flip-container {
perspective: 1000;
-webkit-perspective: 1000;
-moz-perspective: 1000;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.flip-container:OnClickListener .flipper, .flip-container.OnClickListener .flipper {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.flip-container:focus .flipper, .flip-container.focus .flipper {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 100%;
height: 100%;
}
.flipper {
transition: 0.6s;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
background-color: #139eef;
}
.back {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
background-color: #ff0000;
}
.front img {
width: 100%;
}
.back img {
width: 100%;
}
-o-tramsform:
和
-ms-transform:
过渡应该适用于IE和Opera。 为您进行的每个转换再添加2个替代行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.