css3如何设置img水平翻转

这篇文章主要介绍了css3如何设置img水平翻转的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS3如何设置img水平翻转文章都会有所收获，下面我们一起来看看吧。

在css3中，可以利用TransfORM属性设置img元素的水平翻转，Transform属性用于设置元素的2d或3D变换，rotateY()方法用于设置元素沿Y轴3d旋转，语法“图片元素{transform:rotateY(角度值);}”。

本教程操作环境：windows10系统、CSS3&&HTML5版本、Dell G3电脑。

css3怎么设置img水平翻转

在css中，可以让图片在Y轴上旋转180度，从而实现翻转图片

示例如下：

新建一个html文件，命名为test.html，用于讲解css如何让图片翻转。

使用img标签创建一张图片，用于测试。设置img标签的class属性为mypic。

在css标签内，通过class属性设置图片的样式。再使用transform属性通过rotateY让图片在Y轴旋转180度，从而实现图片的翻转。

在浏览器打开test.html文件，查看实现的效果。

关于“css3如何设置img水平翻转”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“css3如何设置img水平翻转”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网JavaScript频道。