|   字数统计: 468(字)

CSS3实现旋转照片墙

发表于 | 分类于 | 阅读次数

CSS3实现旋转照片墙
效果

代码

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>CSS3 transform旋转特效</title>
	<style>
	body{
	background-color:#eee;
}
h1{
	text-align:center;
}
.container{
	width:960px; 
	height:450px; 
	margin:60px auto; 
	position:relative;
}
.container img{
	width:300px;
	height: 400px;
	padding:10px 10px 15px; 
	background:white; 
	border:1px solid #ddd; 
	box-shadow:2px 2px 3px rgba(50, 50, 50, 0.4);
	-webkit-transition:all 0.5s ease-in;
	-moz-transition:all 0.5s ease-in;
	transition:all 0.5s ease-in; 
	position:absolute; 
	z-index:1;
}
.container img:hover{
	box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); 
	-webkit-transform:rotate(0deg) scale(1.20); 
	-moz-transform:rotate(0deg) scale(1.20); 
	transform:rotate(0deg) scale(1.20); 
	z-index:2;
}
.pic1{
	left: 400px; 
	top: 0; 
	-webkit-transform: rotate(-5deg); 
	-moz-transform: rotate(-5deg); 
	transform: rotate(-5deg);
}
.pic2{
	top: 0; 
	left: 600px; 
	-webkit-transform: rotate(-20deg); 
	-moz-transform: rotate(-20deg); 
	transform: rotate(-20deg);
}
.pic3
{
	bottom: 0; 
	right: 0; 
	-webkit-transform: rotate(5deg); 
	-moz-transform: rotate(5deg); 
	transform: rotate(5deg);
}
	
.pic4
{
	bottom:0; 
	left:300px; 
	-webkit-transform: rotate(-10deg); 
	-moz-transform: rotate(-10deg); 
	transform: rotate(-10deg);
}
.pic5
{
	bottom: 0; 
	left: 0; 
	-webkit-transform: rotate(-10deg); 
	-moz-transform: rotate(-10deg); 
	transform: rotate(-10deg);
}
.pic6
{
	top: 0; 
	left:0; 
	-webkit-transform: rotate(10deg); 
	-moz-transform: rotate(10deg); 
	transform: rotate(10deg);
}
.pic7
{
	top: 0; 
	left: 850px; 
	-webkit-transform: rotate(20deg); 
	-moz-transform: rotate(20deg); 
	transform: rotate(20deg);
}
.pic8
{
	bottom: -20px; 
	right: 630px; 
	-webkit-transform: rotate(5deg); 
	-moz-transform: rotate(5deg); 
	transform: rotate(5deg);
}
.pic9
{
	top: 90px; 
	left: 550px; 
	-webkit-transform: rotate(15deg); 
	-moz-transform: rotate(15deg); 
	transform: rotate(15deg);
}
.pic10
{
	left:180px; 
	top:20px; 
	-webkit-transform: rotate(-10deg); 
	-moz-transform: rotate(-10deg); 
	transform: rotate(-10deg);
}
		
	</style>
</head>
<body>
	<h1>CSS3照片墙</h1>
	<div class="container">
		<img class="pic pic1" src="images/mm1.jpg">
		<img class="pic pic2" src="images/mm2.jpg">
		<img class="pic pic3" src="images/mm3.jpg">
		<img class="pic pic4" src="images/mm4.jpg">
		<img class="pic pic5" src="images/mm5.jpg">
		<img class="pic pic6" src="images/mm6.jpg">
		<img class="pic pic7" src="images/mm7.jpg">
		<img class="pic pic8" src="images/mm8.jpg">
		<img class="pic pic9" src="images/mm9.jpg">
		<img class="pic pic10" src="images/mm10.jpg">
	</div>
</body>
</html>

技术点

  • 简单CSS3实现任意设置元素的旋转角
  • 简单CSS3实现图片的等比缩放
  • 利用CSS3将元素的样式变化以动画的方式展现出来。

参考

慕课网 CSS3绚丽照片墙

AlexZ33 wechat
扫码订阅公众号
如果文章对您有用请随意打赏，谢谢支持！