以下是html中的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="demo.css">
<!-- 如果使用上面一行的外链样式表,页面刚打开的时候,就有动态效果 -->
<!-- <style>同样的css代码写在这里,不会产生页面一打开就有动态效果的问题</style> -->
</head>
<body>
<div class="box">
<ul>
<li>
<div class="wrapper">
<div>1</div>
<p>2</p>
</div>
</li>
<li>
<div class="wrapper">
<div>1</div>
<p>2</p>
</div>
</li>
<li>
<div class="wrapper">
<div>1</div>
<p>2</p>
</div>
</li>
</ul>
</div>
</body>
</html>
然后以下是css代码:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
}
body {
background-color: #fff;
}
.box {
width: 630px;
height: 200px;
margin: 100px auto 0;
}
.box ul {
width: 100%;
height: 100%;
list-style: none;
text-align: center;
line-height: 200px;
}
.box ul li {
float: left;
width: 200px;
height: 100%;
margin-right: 15px;
perspective: 1500px;
cursor: pointer;
}
.box ul li:last-of-type {
margin-right: 0;
}
.box ul li .wrapper {
width: 100%;
height: 100%;
transition: -webkit-transform 1.6s;
position: relative;
transform-style: preserve-3d;
}
.box ul li .wrapper div {
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);
background-color: blue;
position: absolute;
top: 0;
transform: translateZ(100px);
transition: all 1.6s;
}
.box ul li .wrapper p {
width: 100%;
height: 100%;
border-radius: 15px;
position: absolute;
top: 0;
box-shadow: none;
background-color: gold;
transform: rotateX(-90deg) translateZ(100px);
transition: all 1.6s;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}
.box ul li .wrapper:hover div {
box-shadow: none;
border-radius: 15px;
}
.box ul li .wrapper:hover p {
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);
border-radius: 5px;
}
.box ul li:hover .wrapper {
transform: rotateX(90deg);
}
