使用纯CSS图像反转的效果
实现效果图如下直接进入代码
1，身体部位
复制代码代码如下所示：
一个头发花白的车
吉他男孩
漂亮的马
2，风格部分
复制代码代码如下所示：
{ *
填充：0；
保证金：0；
}
{体
背景颜色：RGB（244, 244, 244）；
}
{容器。
宽度：1000px；
保证金：汽车；
边距：3em；
清除：左；
}
{。包
WebKit的角度：400；
-moz角度：400；
浮点数：左；
宽度：220px；
右边距：20px；
}
{。图像
宽度：100%；
身高：200px；
WebKit的变换风格：preserve-3d；
WebKit的过渡：1.5s；
风格：preserve-3d -moz变换；
过渡：1.5s -moz；
}
{ IMG
宽度：220px；
身高：200px；
}
包装：hover.image {。
WebKit的变换：rotatey（180deg）；
-moz变换：rotatey（180deg）；
}
{。显示
位置：绝对；
WebKit的背面可见性：隐藏；
-moz背面可见性：隐藏；
}
显示H3 {
颜色：白色；
文本对齐：中心；
}
{。回来
WebKit的变换：rotatey（180deg）；
-moz变换：rotatey（180deg）；
背景：-webkit-gradient（线性，左上，左下，从（# fdbb5a），以（# db5726））；
背景：-moz线性梯度（顶部，# fdbb5a，# db5726）；
宽度：220px；
身高：200px；
行高：200px；
}
总结
以上就是本文的全部内容。我希望这篇文章的内容能对你的学习或工作有所帮助。如果有任何疑问，你可以留言。