<!DOCTYPE html>
<html >
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<meta name="author" content="xuyunfei">
<meta name="description" content="随便做做测试">
<meta name="keywords" content="test,html">
<title>随便做做</title>
<style>
*{ margin: 0; padding: 0; box-sizing: border-box; }
.container, .one, .two{ width: 100px; height: 100px; }
.container{ position: relative; transition: 1s; transform-style: preserve-3d; }
.container:hover { transform: rotateY(180deg); }
.one{ position: absolute; top: 0; background: red; transform: rotateY(180deg);backface-visibility: hidden;}/*两个元素的位置一致,把背面隐藏起来,背面的元素翻转过来*/
.two{ position: absolute; top: 0; background: yellow;backface-visibility: hidden;}
</style>
</head>
<body>
<div class="par">
<div class="container">
<div class="one hide">隐藏在背后的元素</div>
<div class="two show">初始显示在前面的元素</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
