| 实现如下效果 
思路：两个盒子，相对于父元素进行定位。然后蓝色盒子根据x轴进行旋转，要对父元素加上transform-style:perserve-3d 的属性。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
perspective: 500px;
}
.box {
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
/* 让子元素开启三维立体环境 */
transform-style: preserve-3d;
}
.box div {
position: absolute;
top: 0;
left: 0;
/* 和父元素的大小一样 */
width: 100%;
height: 100%;
background-color: pink;
}
/* 最后一个盒子沿x轴旋转 */
.box div:last-child {
background-color: blue;
transform: rotateX(76deg);
}
.box:hover {
transform: rotateY(80deg);
transition: all 1s;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
</html>
|
http://www.51relaw.com/news/bencandy.php?&fid=31&id=1222 |
