html5和css3中怎样设置图片的翻转
程序员文章站
2022-03-01 18:45:50
...
在html5和css3中，可利用transform属性设置图片翻转，该属性可对元素进行旋转、缩放等操作，当该属性与rotateX()函数配合使用时，可设置元素垂直翻转样式，语法为“元素{transform:rotateX(翻转角度);}”。
本教程操作环境：windows10系统、CSS3&&HTML5版、Dell G3电脑。
html5和css3中怎样设置图片的翻转
想要实现图片的翻转效果，可以通过transform属性，transform属性可以对元素进行旋转、缩放、移动或倾斜或翻转等操作。
当属性与rotateX()函数配合使用时，就可以设置元素垂直翻转的样式了。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.img1{
transform:rotateX(180deg);
}
</style>
</head>
<body>
<img src="1115.08.png" class="img1"><br>
<img src="1115.08.png">
</body>
</html>
输出结果：
推荐教程：《html视频教程》
以上就是html5和css3中怎样设置图片的翻转的详细内容，更多请关注其它相关文章！
下一篇： 9.17总结_NOIP模拟赛
推荐阅读
-
HTML5中的伪类选择器实现一张图片翻转特效（代码实例）
-
CSS3中新增的对文本和字体的设置
-
怎样在ps中给图片添加发光文字? ps设置字体发光效果的教程
-
[HTML]解决html5中设置的颜色和浏览器显示的颜色不一致的问题
-
HTML5中的伪类选择器实现一张图片翻转特效（代码实例）
-
Android 如何设置RadioButton中图片的位置和大小
-
在CSS3中图片3D翻转效果是这样做到的_html/css_WEB-ITnose
-
CSS3中关于圆角和阴影以及边框图片和盒子内减的详解
-
在CSS3中图片3D翻转效果是这样做到的_html/css_WEB-ITnose
-
HTML5实践-详细介绍css3中的几个属性text-shadow、box-shadow和border-radius