avatar

css早期练习 旋转相册盒子
1
1
1
1
1
1
1
1
1
1
1
1

废话不多说,直接上代码

HTML部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
<div class="wrap-box">
<div class="box-content">
<div class="l-front"> <img src="http://img.zhangaming.com/img/01.jpg" alt="1"></div>
<div class="l-left"> <img src="http://img.zhangaming.com/img/02.jpg" alt="1"></div>
<div class="l-back"> <img src="http://img.zhangaming.com/img/03.jpg" alt="1"></div>
<div class="l-right"> <img src="http://img.zhangaming.com/img/04.jpg" alt="1"></div>
<div class="m-front"> <img src="http://img.zhangaming.com/img/05.jpg" alt="1"></div>
<div class="m-left"> <img src="http://img.zhangaming.com/img/06.jpg" alt="1"></div>
<div class="m-back"> <img src="http://img.zhangaming.com/img/07.jpg" alt="1"></div>
<div class="m-right"> <img src="http://img.zhangaming.com/img/08.jpg" alt="1"></div>
<div class="s-front"> <img src="http://img.zhangaming.com/img/01.jpg" alt="1"></div>
<div class="s-left"> <img src="http://img.zhangaming.com/img/02.jpg" alt="1"></div>
<div class="s-back"> <img src="http://img.zhangaming.com/img/03.jpg" alt="1"></div>
<div class="s-right"> <img src="http://img.zhangaming.com/img/04.jpg" alt="1"></div>
</div>
</div>
</body>

css部分

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

<style type="text/css">
/*
外部容器
*/
.wrap-box{
width: 100%;
height: auto;
perspective: 800px;
}
/*
核心容器
*/
.box-content{
width: 200px;
height: 200px;
margin: 2em auto 10em;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
position: relative;
animation: rotate 10s infinite linear;
}
@keyframes rotate {
0%{ transform: rotateX(-10deg) rotateY(0deg) }
50%{ transform: rotateX(-10deg) rotateY(180deg) }
100%{ transform: rotateX(-10deg) rotateY(360deg) }
}
@-webkit-keyframes rotate {
0%{ -webkit-transform: rotateX(-10deg) rotateY(0deg) }
50%{ -webkit-transform: rotateX(-10deg) rotateY(180deg) }
100%{ -webkit-transform: rotateX(-10deg) rotateY(360deg) }
}
.box-content img{
width:100%;
}
.box-content div{
position: absolute;
transition: all 0.2s ease;
left: 0;
}
/*
外层div
*/
.box-content div[class^="l"]{
width: 200px;
height: 200px;
top:0;
}
/*
中间div
*/
.box-content div[class^="m"]{
width: 150px;
height: 150px;
opacity: 0;
top: 30px;
}
/*
内层div
*/
.box-content div[class^="s"]{
width: 100px;
height: 100px;
opacity: 0;
top: 50px;
}
.box-content:hover div[class^="l"]{
top:0;
}
.box-content:hover div[class^="m"]{
opacity: 1;
}
.box-content:hover div[class^="s"]{
opacity: 1;
}
/*
前方元素
*/
.box-content div[class*="front"]{
transform: translateZ(100px);
-webkit-transform: translateZ(100px);
}
/*
左边元素
*/
.box-content div[class*="left"]{
transform: translateX(-100px) rotateY(-90deg);
-webkit-transform: translateX(-100px) rotateY(-90deg);
}
/*
后方元素
*/
.box-content div[class*="back"]{
transform: translateZ(-100px);
-webkit-transform: translateZ(-100px);
}
/*
右边元素
*/
.box-content div[class*="right"]{
transform: translateX(100px) rotateY(90deg);
-webkit-transform: translateX(100px) rotateY(90deg);
}
.box-content:hover div.l-front{
transform: translateZ(250px);
-webkit-transform: translateZ(250px);
}
.box-content:hover div.m-front{
transform: translateZ(150px);
-webkit-transform: translateZ(150px);
}
.box-content:hover div.s-front{
transform: translateZ(50px);
-webkit-transform: translateZ(50px);
}
.box-content:hover div.l-left{
transform: translateX(-250px) rotateY(-90deg);
-webkit-transform: translateX(-250px) rotateY(-90deg);
}
.box-content:hover div.m-left{
transform: translateX(-150px) rotateY(-90deg);
-webkit-transform: translateX(-150px) rotateY(-90deg);
}
.box-content:hover div.s-left{
transform: translateX(-50px) rotateY(-90deg);
-webkit-transform: translateX(-50px) rotateY(-90deg);
}
.box-content:hover div.l-back{
transform: translateZ(-250px);
-webkit-transform: translateZ(-250px);
}
.box-content:hover div.m-back{
transform: translateZ(-150px);
-webkit-transform: translateZ(-150px);
}
.box-content:hover div.s-back{
transform: translateZ(-50px);
-webkit-transform: translateZ(-50px);
}
.box-content:hover div.l-right{
transform: translateX(250px) rotateY(90deg);
-webkit-transform: translateX(250px) rotateY(90deg);
}
.box-content:hover div.m-right{
transform: translateX(150px) rotateY(90deg);
-webkit-transform: translateX(150px) rotateY(90deg);
}
.box-content:hover div.s-right{
transform: translateX(50px) rotateY(90deg);
-webkit-transform: translateX(50px) rotateY(90deg);
}
</style>
文章作者: 张复明
文章鏈接: https://hexo.zhangaming.com/2020/04/03/css-rotate/
版權聲明: 本博客所有文章除特別聲明外,均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明來自 阿明的博客
打賞
  • 微信
    微信
  • 支付寶
    支付寶

評論