利用CSS3实现图片旋转放大特效

最新推荐文章于 2024-04-11 12:19:59 发布

PurpleLine

最新推荐文章于 2024-04-11 12:19:59 发布

阅读量5k

点赞数 1

分类专栏： Web Html5/Css3

本文链接：https://blog.csdn.net/apple_purpleline/article/details/41702905

版权

Web 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

Html5/Css3

1 篇文章 0 订阅

订阅专栏

HTML5+CSS3已经出来一段时间了，作为新（cai）手( niao），只能边学习边记录了，下面介绍的如何利用CSS3特性制作图片旋转放大的效果。

一、HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8" />
	<title>照片墙</title>
	<link href = "css/photo.css" type="text/css" rel ="stylesheet">
</head>
<body>
	<h1>照片墙</h1>
	<div class = "container">
		<img class="pic1" src="images/mm1.jpg"/>
		<img class="pic2" src="images/mm2.jpg"/>
		<img class="pic3" src="images/mm3.jpg"/>
</body>
</html>

二、CSS代码

body{
	background:#eee
}
h1{
	text-align:center
}
.container{
	width:960px;
	height:450px;
	margin:60px auto;
	position:relative
}
 img{
	padding:10px 10px 15px;
	background:#fff;
	border:1px solid #ddd; 
	position:absolute;
	-webkit-transition:0.2s;
	-moz-transition:0.2s;
	transition:0.2s;
	z-index:1
}
 img:hover{
	-webkit-transform:rotate(0deg) ;
	-moz-transform:rotate(0deg) ;
	transform:rotate(0deg) ;
	-webkit-transform:scale(1.5);
	-moz-transform:scale(1.5);
	transform:scale(1.5);
	box-shadow:10px 10px 15px #ccc;
	z-index:2
}
.pic1{
	left:200px;
	top:100px;
	-webkit-transform:rotate(-20deg);
	-moz-transform:rotate(-20deg);
	transform:rotate(-20deg);
}

.pic2{
	left:300px;
	top:100px;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	transform:rotate(0deg);
}
.pic3{
	left:400px;
	top:100px;
	-webkit-transform:rotate(20deg);
	-moz-transform:rotate(20deg);
	transform:rotate(20deg);
}

三、效果图

PurpleLine

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
利用CSS3实现图片旋转放大特效

HTML5+CSS3已经出来一段时间了，作为新（cai）手( niao），只能边学习边记录了，下面介绍的如何利用CSS3特性制作图片旋转放大的效果。一、HTML代码照片墙照片墙二、CSS代码body{ background:#eee}h1{ text-align:center}.container{ wi
复制链接

扫一扫