.flip{
display:inline-block;
position:relative;
perspective:800px;
-webkit-perspective:800px;
-moz-perspective:800px;
}
.flip div{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
}
.flip:hover div:first-child{
transform:rotateY(-180deg);
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
}
.flip:hover div:last-child{
transform:rotateY(0deg);
-webkit-transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
}
.flip div img{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}代码中的关键在于transform-style:preserve-3d属性，它能够让一个元素内的子元素保持3D空间关系，这样才能实现翻转效果。
在HTML中，大家可以使用
来包裹两张图片，然后使用CSS对其进行样式设置。当鼠标放在元素上时，通过:hover来触发翻转效果，让第一张图片向内翻转，第二张图片向外翻转。
通过这种方式，大家可以实现一个炫酷的翻字效果图，让网页更加生动和有趣。
css选择器的优先级如何，不需要单独创建css文件的方式 - CSS - 前端，html css电子书下载 | css选择器的优先级如何，不需要单独创建css文件的方式 - CSS - 前端，html css电子书下载 ...