使用css3动画变形元素制作动态照片墙

2013-11-16 22:15| 发布者: admin| 查看: 3426| 评论: 0|原作者: admin

摘要: 本例给大家介绍一下使用css3动画元素，综合移动、旋转、缩放等控制函数制作动态的照片墙界面。当鼠标移动到照片上时，照片会竖直摆放，并且会有放大效果。先看效果图：在这个案例中，用到了css3阴影，透明 ...

本例给大家介绍一下使用css3动画元素，综合移动、旋转、缩放等控制函数制作动态的照片墙界面。当鼠标移动到照片上时，照片会竖直摆放，并且会有放大效果。
先看效果图：
使用css3动画变形元素制作动态照片墙

在这个案例中，用到了css3阴影，透明效果，变形动画等。因此，先带大家了解一下CSS3 transform 动画变形属性。

transform 动画属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
语法：transform: none|transform-functions;

matrix(n,n,n,n,n,n)       定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)       定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)       定义 2D 转换。
translate3d(x,y,z)       定义 3D 转换。
translateX(x)       定义转换，只是用 X 轴的值。
translateY(y)       定义转换，只是用 Y 轴的值。
translateZ(z)       定义 3D 转换，只是用 Z 轴的值。
scale(x,y)       定义 2D 缩放转换。
scale3d(x,y,z)       定义 3D 缩放转换。
scaleX(x)       通过设置 X 轴的值来定义缩放转换。
scaleY(y)       通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)       通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)       定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)       定义 3D 旋转。
rotateX(angle)       定义沿着 X 轴的 3D 旋转。
rotateY(angle)       定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)       定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)       定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)       定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)       定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)       为 3D 转换元素定义透视视图。

css3动画照片墙实现代码如下：
界面代码：

<body>
<ul class="polaroids">
<li> <a href="1" title="相识"> <img src="images/11.jpg" alt="相识" /> </a> </li>
<li> <a href="2" title="凝视"> <img src="images/22.jpg" alt="凝视" /> </a> </li>
<li> <a href="3" title="甜睡"> <img src="images/33.jpg" alt="甜睡" /> </a> </li>
<li> <a href="4" title="逗乐"> <img src="images/44.jpg" alt="逗乐" /> </a> </li>
<li> <a href="5" title="奔跑"> <img src="images/55.jpg" alt="奔跑" /> </a> </li>
<li> <a href="6" title="漠视"> <img src="images/66.jpg" alt="漠视" /> </a> </li>
<li> <a href="7" title="险峰"> <img src="images/image-07.jpg" alt="险峰" /> </a> </li>
<li> <a href="8" title="胜景"> <img src="images/image-08.jpg" alt="胜景" /> </a> </li>
</ul>
</body>