-
今天是读图时代，大多数的网页或图片少用。特别是具有更多的网页图片的布局和图片的排版是非常重要的。今天我们要带一个纯CSS3图片三角上，适用于一系列的图片效果。如下：
本代码实现可以有两种：HTML代码和CSS3代码，具体如下
HTML代码：
复制代码代码如下所示：
CSS3代码：
复制代码如下：正文
{
背景：# f1f1fa；
}
容器。
{
保证金：140px汽车0；
字体大小：0；
马克斯：560px宽度；
}
。包
{
WebKit的变换：旋转（45deg）translate3d（0, 0, 0）；
-moz变换：旋转（45deg）translate3d（0, 0, 0）；
MS：旋转变换（45deg）translate3d（0, 0, 0）；
- o-transform：旋转（45deg）translate3d（0, 0, 0）；
变换：旋转（45deg）translate3d（0, 0, 0）；
显示：内联块；
WebKit的过渡：WebKit的变换300ms自在；
-moz过渡：-moz变换300ms自在；
过渡：变换300ms自在；
宽度：100px；
}
包裹：盘旋
{
WebKit的过渡：WebKit的变换700ms自在；
-moz过渡：-moz变换700ms自在；
过渡：变换700ms自在；
WebKit的变换：旋转（45deg）translate3d（10px，10px，0）；
-moz变换：旋转（45deg）translate3d（10px，10px，0）；
MS：旋转变换（45deg）translate3d（10px，10px，0）；
- o-transform：旋转（45deg）translate3d（10px，10px，0）；
变换：旋转（45deg）translate3d（10px，10px，0）；
}
包装：第n个子（偶数）
{
宽度：40px；
WebKit的变换：旋转（225deg）translate3d（30px，120px，0）；
-moz变换：旋转（225deg）translate3d（30px，120px，0）；
MS：旋转变换（225deg）translate3d（30px，120px，0）；
- o-transform：旋转（225deg）translate3d（30px，120px，0）；
变换：旋转（225deg）translate3d（30px，120px，0）；
}
。包装：nth-child（甚至）Crop IMG。
{
WebKit的变换：斜（- 20deg，- 20deg）旋转（- 225deg）；
-moz变换：斜（- 20deg，- 20deg）旋转（- 225deg）；
MS变换：斜（- 20deg，- 20deg）旋转（- 225deg）；
- o-transform：斜（- 20deg，- 20deg）旋转（- 225deg）；
变换：斜（- 20deg，- 20deg）旋转（- 225deg）；
}
换行：第n个子（偶数）：悬停
{
WebKit的变换：旋转（225deg）translate3d（40px，130px，0）；
-moz变换：旋转（225deg）translate3d（40px，130px，0）；
MS：旋转变换（225deg）translate3d（40px，130px，0）；
- o-transform：旋转（225deg）translate3d（40px，130px，0）；
变换：旋转（225deg）translate3d（40px，130px，0）；
}
作物。
{
职位：相对；
宽度：160px；
身高：160px；
保证金：0；
显示块；
溢出：隐藏；
WebKit的变换：斜（20deg，20deg）translate3d（0, 0, 0）；
-moz变换：斜（20deg，20deg）translate3d（0, 0, 0）；
MS变换：斜（20deg，20deg）translate3d（0, 0, 0）；
- o-transform：斜（20deg，20deg）translate3d（0, 0, 0）；
变换：斜（20deg，20deg）translate3d（0, 0, 0）；
}
作物的IMG。
{
宽度：160px；
身高：160px；
位置：绝对；
左：- 50%；
边距：36px；
左：36px保证金；
顶部：- 50%；
WebKit的变换：斜（- 20deg，- 20deg）旋转（45度）；
-moz变换：斜（- 20deg，- 20deg）旋转（45度）；
MS变换：斜（- 20deg，- 20deg）旋转（45度）；
- o-transform：斜（- 20deg，- 20deg）旋转（45度）；
变换：斜（- 20deg，- 20deg）旋转（45度）；
不透明性：0.7；
WebKit的过渡：透明度300ms缓解了；
-moz过渡：透明度300ms缓解了；
过渡：透明度300ms缓解了；
}
作物IMG：悬停。
{
不透明性：1；
}