元素翻转之后,看到背面的内容。css3效果代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<style>
*{margin:0;padding:0;}
.element{position:relative;color:#fff;text-align:center;line-height:120px;transform-style:preserve-3d;transition:1s;}
.element,.front,.back{width:90px;height:120px;backface-visibility:hidden;}
.front,.back{position:absolute;left:0;top:0;}
.front{background:#f00;}
.back{background:#0f0;transform:rotateY(180deg);}
.element:hover{transform:rotateY(180deg);}
</style>
</head>
<body>
<div class="element">
<div class="front">前面</div>
<div class="back">背面</div>
</div>
</body>
</html>