css3照片墙_html/css

css3照片墙_html/css_WEB-ITnose

2024/4/17 16:01:56发布23次查看

一张张照片散乱的撒在一起，鼠标悬浮时旋转放大并摆正，效果如下图（所有图片均来自网络），主要使用到的css3属性有：transition、transform（scale、rotatez）、box-shadow以及z-index。

本例子只兼容了webkit内核的浏览器，若要兼容其他内核的浏览器需要添加其他前缀（-moz-、-o-等）。
另外，本例子中使用的 rotatez 属性的值的正负方向常使人发生混乱，在3d场景中，x轴正方向为水平向右，y轴正方向为垂直向下，z轴的正方向为垂直于屏幕向外，确定正方向之后只需要记住如下规则即可：从坐标原点出发，向着坐标轴的正方向看去，逆时针旋转时rotate(x/y/z)的值为正数，顺时针旋转时，rotate(x/y/z)值为负数。

该用户其它信息

css3照片墙_html/css_WEB-ITnose

VIP推荐