首页 > web前端 > 前端问答 > css3怎么设置img水平翻转

css3怎么设置img水平翻转

WBOY
发布: 2022-04-20 18:10:30
原创
5591 人浏览过

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

css3怎么设置img水平翻转

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

css3怎么设置img水平翻转

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

示例如下:

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

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

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

20.png

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

21.png

总结:

1、使用img标签创建一张图片,设置img标签的class属性为mypic。

2、在css标签内,通过class属性设置图片的样式。

3、在css标签内,再使用transform属性通过rotateY让图片在Y轴旋转180度,从而实现图片的翻转。

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

(学习视频分享:css视频教程

以上是css3怎么设置img水平翻转的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
css
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板