主要用到的技术除了3D翻转和定位，还用到了一个新的属性backface-visibility：visable|hidden;
该属性主要是用来设定元素背面是否可见。
具体的步骤如下：
1、写出页面主体，
<div>
<imgsrc="Images/b.jpg"alt="">
<imgsrc="Images/c.jpg"alt="">
</div>
2、通过定位使两张图片叠加在一起
divimg{
width:250px;
height:170px;
position:absolute;
top:0;
left:0;
transition:all1s;
}
3、设置第一张图片背面不可见
divimg:first-child{
z-index:1;
backface-visibility:hidden;
}
4、添加旋转180度
div:hoverimg{
transform:rotateY(180deg);
}
最后给出完整代码
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<style>
/*backface-visibility*/
div{
width:250px;
height:170px;
margin:100pxauto;
position:relative;
}
divimg{
width:250px;
height:170px;
position:absolute;
top:0;
left:0;
transition:all1s;
}
divimg:first-child{
z-index:1;
backface-visibility:hidden;
}
div:hoverimg{
transform:rotateY(180deg);
}
</style>
</head>
<body>
<div>
<imgsrc="Images/b.jpg"alt="">
<imgsrc="Images/c.jpg"alt="">
</div>
</body>
</html>
本文转载自中文网
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c55301.shtml
