效果图:
1.
2.
....
鼠标放在图片上，图片选择一定角度，放大，有阴影效果.
实现代码:
html:
<!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>css3照片墙</title>
<link href="linkcss.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<h1>照片墙制作</h1>
<div class="container">
<img class="pic1" src="imges/1.jpg" />
<img class="pic2" src="imges/2.jpg" />
<img class="pic3" src="imges/3.jpg" />
<img class="pic4" src="imges/4.jpg" />
<img class="pic5" src="imges/5.jpg" />
<img class="pic6" src="imges/6.jpg" />
<img class="pic7" src="imges/7.jpg" />
</div>
</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;transition:1s;
z-index:1}
img:hover{
transform:rotate(0deg);
transform:scale(1.2);
box-shadow:10px -10px 15px #ccc;
z-index:2000;
}
.pic1{
top:20px;left:450px;transform:rotate(-25deg);
}
.pic2{
top:50px;left:10px;transform:rotate(30deg);
}
.pic3{
top:150px;left:150px;transform:rotate(40deg);
}
.pic4{
top:150px;left:550px;transform:rotate(25deg);
}
.pic5{
top:250px;left:10px;transform:rotate(-10deg);
}
.pic6{
top:250px;left:450px;transform:rotate(30deg);
}
.pic7{
top:250px;left:250px;transform:rotate(15deg);
}
很好懂的.
补充:
我用的是谷歌浏览器，如果出现浏览器不兼容问题，可以试试在transform前加标识，比如-webkit,-moz的.
相关推荐
《CSS3照片墙：构建视觉丰富的图片展示布局》 在当今的网页设计中，CSS3已经成为了一种不可或缺的技术，它提供了丰富的样式和动画效果，极大地提升了网页的视觉体验。其中，CSS3照片墙（图片墙）特效就是一种广泛...
本示例中提到的"CSS3 照片墙 图片随机排列效果"是一个利用CSS3特性实现的图片展示方式，它通过随机排序的方式为用户提供了一种富有艺术感的浏览体验。 首先，让我们来了解CSS3中实现这个效果的关键技术： 1. **...
在这个"css3实现照片墙"的项目中，我们将深入探讨如何利用CSS3的特性来创建一个吸引人的照片展示效果。 首先，我们要理解“照片墙”这个概念。照片墙通常是指在一个页面上以网格或非规则布局展示一系列图片的效果，...
3. **CSS动画**：动态效果是照片墙的核心特征。可以使用CSS关键帧动画（@keyframes）来实现图片的入场、退出、平移、缩放等动画效果。例如，图片载入时可以淡入显示，鼠标悬停时可以放大或旋转。 4. **图片懒加载**...
总结，"JS、CSS超酷3D照片墙"是一个结合了JavaScript动态性和CSS3三维变换技术的创新应用，它通过精心设计的布局和交互，为用户带来了独特的视觉体验。在实际开发中，开发者可以根据需求自定义照片墙的样式、布局和...
一款基于HTML5 CSS3的瀑布流布局特效，相信瀑布流您已经很熟悉了，这两年流行的一种网页布局效果，它可以横向和垂直布局，本款代码貌似兼顾了两者，看上去更像是一个照片墙特效，点击任意一张小图片，会显示该图片的...
本文将深入探讨如何利用CSS3的2D旋转、过渡和缩放功能来实现一个引人注目的照片墙效果。 首先，我们需要了解CSS3的2D旋转（transform: rotate()）。这个属性允许我们将元素以某个角度进行旋转，例如，`rotate(45deg...
【标题】"js+css3随机排列照片墙展示特效.zip"是一个包含JavaScript和CSS3技术的项目，旨在创建一个动态的、随机排列的照片墙展示效果。这种特效在网页设计中常用于图片展示区域，给用户带来新颖且互动的视觉体验。 ...
主要介绍了纯css3实现照片墙效果，鼠标悬浮时旋转放大并摆正，主要使用到的css3属性有：transition、transform（scale、rotateZ）、box-shadow以及z-index，推荐给小伙伴们
css 实现照片墙
标题中的“html+CSS制作照片墙”指的是使用HTML（超文本标记语言）和CSS（层叠样式表）来创建一个展示多张图片的布局，这种布局通常被称为照片墙或者图片网格。HTML是网页内容的基础结构，而CSS则用于定义这些内容的...
一份送给女朋有爱心相册
《jQuery HTML5 CSS3绚丽变换组合》是一款利用现代网页技术打造的动态图片展示方案，它巧妙地结合了jQuery库的高效交互性、HTML5的新特性以及CSS3的强大样式控制，为用户提供了丰富的视觉体验。这款特效图适用于创建...
在本文中，我们将深入探讨如何使用HTML和CSS创建一个自定义的照片墙，这是一个非常适合初学者的Web前端页面制作入门级案例。照片墙是一种常见的网页设计元素，它允许用户以美观的方式展示一系列图片，通常用于个人...
通过简单的html代码加上css中的动画属性来制作的滚动的照片墙，还带有音乐播放器，背景图片随着滚动到最前面的图片跟着变化。
jquery css3实现瀑布流照片墙特效.rar jquery css3实现瀑布流照片墙特效.rar jquery css3实现瀑布流照片墙特效.rar jquery css3实现瀑布流照片墙特效.rar jquery css3实现瀑布流照片墙特效.rar jquery css3实现瀑布...
网页制作中3D旋转照片墙的CSS,搭配同名html代码可以呈现出，3D旋转的酷炫照片效果，照片可以自己设置
CSS3制作精致的照片墙特效涉及到多个知识点，包括HTML、CSS中的盒模型、定位、过渡、变换等技术。本文将详细介绍如何使用这些技术制作出具有视觉吸引力的照片墙效果。 首先，要制作照片墙，我们需要用HTML来定义...
**jQuery和CSS3图片照片墙插件详解** 在网页设计中，图片展示方式多样，而“图片照片墙”是一种常用且吸引用户注意力的设计手法。它将多张图片以不规则的布局展示，形成视觉上的独特效果。本篇将详细介绍一个基于...
"css3创建六边形照片墙"这个主题正是围绕这一技术展开的。六边形作为一种非传统的布局形状，可以为网页设计带来独特的视觉效果，尤其适用于创建引人入目的照片墙。在这里，我们将深入探讨如何使用CSS3的特性来构建...