-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path3D盒子.html
30 lines (29 loc) · 1.32 KB
/
3D盒子.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
.box{width: 300px;height: 300px;margin:100px auto;position:relative;-webkit-transform-style:preserve-3d;-webkit-transform:perspective(800px) rotateY(0deg) rotateX(0deg);-webkit-transition:3s all ease;}
.box div{position:absolute;left:0;top:0;text-align: center;line-height: 300px;width:100%;height:100%;font-size: 50px;}
.box .front{background: rgba(0,255,255,0.3);-webkit-transform:translateZ(150px);}
.box .back{background: rgba(255,0,0,0.3);-webkit-transform:translateZ(-150px);}
.box .left{background: rgba(0,255,0,0.3);-webkit-transform:translate(-150px,0) rotateY(-90deg);}
.box .right{background: rgba(0,0,255,0.3);-webkit-transform:translate(150px,0) rotateY(90deg);}
.box .top{background: rgba(255,0,255,0.3);-webkit-transform:translate(0,-150px) rotateX(90deg);}
.box .bottom{background: rgba(0,255,255,0.3);-webkit-transform:translate(0,150px) rotateX(-90deg);}
.box:active{-webkit-transform:perspective(800px) rotateX(360deg) rotateY(360deg) ;}
</style>
</head>
<body>
<div class="box">
<div class="front">前</div>
<div class="back">后</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="top">上</div>
<div class="bottom">下</div>
</div>
</body>
</html>