CSS3中许些实用的属性(续)_css3 suo-优快云博客

本文链接：https://blog.youkuaiyun.com/suorce/article/details/84702485

本文介绍如何使用CSS3的transform属性实现图片展示的动态效果，包括图片的倾斜、放大、旋转及阴影添加，通过简单的代码示例展示了如何创建吸引人的图片展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们今天再来看一个有趣的CSS3中的属性transform
transform可以对元素旋转、倾斜、缩放和移动
用法：transform: scale(2) rotate(10deg);
参数：图片缩放，图片旋转

加上昨天的一些属性今天，就写一个简单的图片展示。

1.先将图片显示

<ul class="gallery">
		<li><a href="#"><img src="images/01.jpg" /></a></li>
		<li><a href="#"><img src="images/02.jpg" /></a></li>
		<li><a href="#"><img src="images/03.jpg" /></a></li>
	</ul>

效果:
first

2.然后将图片格式排版一下，并用transform将它倾斜

ul.gallery {
			margin: 200px 200px;
		}
		ul.gallery li {
			float: left;
			margin: 10px;
			padding: 10px;
			border: 1px solid #ddd;
			list-style: none;
			-webkit-transform:rotate(-10deg);
			-moz-transform:rotate(-10deg);
			-o-transform:rotate(-10deg);
			transform:rotate(-10deg);
		}
		ul.gallery li a img {
			widows: 200px;
			height: 125px;
			float: left;
			-webkit-transition: -webkit-transform .8s ease-in-out;
			-moz-transition: -moz-transform .8s ease-in-out;
			transition: transform .8s ease-in-out;
		}

效果：
second

3.添加鼠标覆盖图片时的动作（将图片转正，放大还有添加一些阴影）：

ul.gallery li a:hover img {
			-webkit-transform: scale(2) rotate(10deg);
			-moz-transform: scale(2) rotate(10deg);
			-o-transform: scale(2) rotate(10deg);
			transform: scale(2) rotate(10deg);
			-webkit-box-shadow: 4px 4px 10px rgba(0, 12, 23, 0.7);
			-moz-box-shadow: 4px 4px 10px rgba(0, 12, 23, 0.7);
			-o-box-shadow: 4px 4px 10px rgba(0, 12, 23, 0.7);
			box-shadow: 4px 4px 10px rgba(0, 12, 23, 0.7);
		}

最后成品效果：

third