• 技术文章 >web前端 >前端问答

    css3怎么设置img水平翻转

    长期闲置长期闲置2022-04-20 18:10:30原创655

    在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度,从而实现图片的翻转。

    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中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:jquery怎么增加一个li元素 下一篇:jquery怎么根据id改变元素值
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• css3中单数li的写法是什么• 聊聊如何用CSS box-shadow创建像素创意动画• css怎么设置i不是斜体• css定位布局是什么意思• css怎么去除a标签鼠标样式
    1/1

    PHP中文网