-
Notifications
You must be signed in to change notification settings - Fork 0
/
rotate.htm
executable file
·89 lines (78 loc) · 4.46 KB
/
rotate.htm
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>立方體</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
body{font-size:12px; background:#ccc;}
.box{ position:relative; left:500px; top:300px;}
.box .inBox{ height:200px; width:200px; background:rgba(255,255,255,0.2); position:absolute; -moz-transform-origin:0% 0%;}
.box .inBox:after,.under .box_before:before,.under .box_right:before{background:rgba(0,0,0,0); display:block; height:200px; width:200px; content:" "; position:absolute; left:0px; top:0px;}
.box .box_before{-moz-transform:skew(0deg,20deg);}
.box .box_back{-moz-transform:skew(0deg,20deg); left:200px; top:-73px;}
.box .box_left{-moz-transform:skew(0deg,-20deg); background:rgba(255,255,255,0.1);}
.box .box_right{-moz-transform:skew(0deg,-20deg); left:200px; top:73px; background:rgba(255,255,255,0.2);}
.box .box_top{-moz-transform:rotate(-40deg) skew(30deg,20deg); height:185px; background:rgba(255,255,255,0.4);}
.box .box_bottom{-moz-transform:rotate(-40deg) skew(30deg,20deg); height:185px; top:200px; background:rgba(255,255,255,0.3);}
.box .box_bottom:after{height:185px;-moz-box-shadow:0px -1px 0px rgba(255,255,255,0.4),1px 0px 0px rgba(255,255,255,0.4),-1px 1px 5px rgba(50,50,50,0.1);}
.box .box_before:after{-moz-box-shadow:0px -1px 0px rgba(255,255,255,0.6),1px 0px 0px rgba(255,255,255,0.6),0px 1px 0px rgba(255,255,255,0.6),-1px 0px 0px rgba(255,255,255,0.6);
background:-moz-linear-gradient(-45deg, rgba(255,255,255,0.3),rgba(255,255,255,0.2) 40%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0.1));}
.box .box_right:after{-moz-box-shadow:0px -1px 0px rgba(255,255,255,0.6),1px 0px 0px rgba(255,255,255,0.6),0px 1px 0px rgba(255,255,255,0.6);
background:-moz-linear-gradient(-45deg, rgba(255,255,255,0.2),rgba(255,255,255,0.1) 40%,rgba(255,255,255,0.1) 40%,rgba(255,255,255,0));}
.box .box_top:after{height:185px;-moz-box-shadow:0px -1px 0px rgba(255,255,255,0.6),1px 0px 0px rgba(255,255,255,0.6);\
background:-moz-linear-gradient(-45deg, rgba(255,255,255,0.2),rgba(255,255,255,0.1) 40%,rgba(255,255,255,0.1) 40%,rgba(255,255,255,0));}
.box .box_left:after{
-moz-box-shadow:1px 0px 0px rgba(255,255,255,0.2);
background:-moz-linear-gradient(-65deg, rgba(255,255,255,0.1),rgba(255,255,255,0) 50%,rgba(255,255,255,0.1));}
.box .box_back:after{
background:-moz-linear-gradient(top, rgba(255,255,255,0),rgba(255,255,255,0.1), rgba(255,255,255,0));}
.under .box_before:before,.under .box_right:before{ -moz-transform:translate(0px,201px); background: -moz-linear-gradient(top,rgba(255,255,255,0.2),rgba(255,255,255,0.3) 2%,rgba(255,255,255,0) 50%,rgba(255,255,255,0));}
.under .box_before:before{ width:201px;}
.box .box_before:hover{-moz-transform:skew(0deg, 0deg) translate(0px,73px);}
.box .box_right:hover{-moz-transform:skew(0deg, 0deg);}
.box .box_top:hover{-moz-transform:rotate(-80deg) skew(30deg,20deg);}
.conBox{ padding:10px; font-size:12px; color:#333; line-height:1.5;}
.conBox .title{ color:#222;}
.box2{ position:relative; width:400px; left:900px; top:200px;}
.box3{ position:relative; width:400px; left:700px; top:-73px;}
</style>
</head>
<body>
<div class="box under">
<div class="inBox box_left"></div>
<div class="inBox box_back"></div>
<div class="inBox box_bottom"></div>
<div class="inBox box_right">
<div class="conBox">
<h3 class="title">中秋节要来啦</h3>
<p>中秋节要来啦，龙祝大家中秋有月饼吃...哈根达斯冰皮的...</p>
</div>
</div>
<div class="inBox box_before">
<div class="conBox">
<h3 class="title">中秋节要来啦</h3>
<p>中秋节要来啦，龙祝大家中秋有月饼吃...哈根达斯冰皮的...</p>
</div>
</div>
<div class="inBox box_top"></div>
</div>
<!--
<div class="box box2">
<div class="inBox box_before">前</div>
<div class="inBox box_back">后</div>
<div class="inBox box_left">左</div>
<div class="inBox box_right">右</div>
<div class="inBox box_top">上</div>
<div class="inBox box_bottom">下</div>
</div>
<div class="box box3">
<div class="inBox box_before">前</div>
<div class="inBox box_back">后</div>
<div class="inBox box_left">左</div>
<div class="inBox box_right">右</div>
<div class="inBox box_top">上</div>
<div class="inBox box_bottom">下</div>
</div>-->
</body>
</html>