超越“宽度”属性
经典的“之前”和“之后”效应让我们只过渡“
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博客 ” ，链接：https://blog.itpub.net/69933200/viewspace-2651611/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
一个纯CSS前后图像效果（2）
下一篇：
CSS媒体查询简介（3）
请登录后发表评论
登录
全部评论
