一个纯CSS前后图像效果（3）

 超越“宽度”属性

经典的“之前”和“之后”效应让我们只过渡“  width ”属性来折叠前图像并显示后图像，但这并不意味着我们无法获得一点创意。在下面的示例中，让我们看一下结合“  width ” 转换其他属性的结果，再加上一个不同的属性，看看我们可以在效果之前/之后放置什么类型的旋转：

	结合“过渡”“宽度”和“不透明度” div.beforeandafter：hover div.before { 宽度：0; 不透明度：0;}
	同时转换“宽度”和“高度” div.beforeandafter：hover div.before { 宽度：0; 身高：0;}
	转换“高度”属性 div.beforeandafter：hover div.before { 身高：0;}
	转换“转换”属性 div.beforeandafter：hover div.before { transform：rotate（360deg）translate3D（100％，100％，0）}
	创建翻转卡效果 div.beforeandafter {/ *主要容器* / 背景：白色; 边框：1px实心灰色; 显示：块; 宽度：234px; / *主容器的宽度* / 身高：320px; / *主容器高度* / 位置：相对; 观点：1000px; / *值越大，3D效果越不明显* /}div.before，div.after {/ *在主容器内DIV之前和之后* / 身高：100％; 位置：绝对; 左：0; 顶部：0; 宽度：100％; z-index：100; transform-style：preserve-3d; / *将儿童DIV放置在3D空间中* / 过渡：全部轻松进出; / * CSS过渡。* /}div.after { transform：rotateY（-180deg）; / *在“DIV之后”旋转-180deg以启动* / z-index：1; / *之后的div-index应小于之前的* /}div.before { 背面 - 可见性：隐藏; / *隐藏“之前”DIV背面* /}div.beforeandafter：hover div.before { 变换：rotateY（180deg）}div.beforeandafter：hover div.after { transform：rotateY（0）}

正如您所看到的，只需通过调整鼠标滚过前/后容器时修改的CSS属性，我们就可以在原始效果上创建许多变体。最后一个例子超越了深入研究3D变换。

我们可以扩展“之前和之后”效果的另一个领域是使用户能够在同一容器内加载不同的图像集，因此可以方便地比较多组图像。让我们看看如何在下一页上做到这一点。

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/69933200/viewspace-2651611/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/69933200/viewspace-2651611/