html怎么将背景图片旋转,css怎么旋转图片? | 您所在的位置:网站首页 › html背景图片css › html怎么将背景图片旋转,css怎么旋转图片? |
在网页中我们经常会用到旋转图片等问题,我们该如何使用css设置图片旋转效果呢?今天教大家如何用CSS在HTML做出图片旋转的效果,图片的任意角度都可以旋转。 css设置图片旋转效果可以使用css3的transform属性,transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 transform属性: 使用语法:transform: none|transform-functions; Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。 Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。 Opera 只支持 2D 转换。 示例: div { margin:30px; width:200px; height:300px; background-image:url(img/3.jpg); /* Rotate div */ transform:rotate(9deg); -ms-transform:rotate(9deg); /* Internet Explorer */ -moz-transform:rotate(9deg); /* Firefox */ -webkit-transform:rotate(9deg); /* Safari 和 Chrome */ -o-transform:rotate(9deg); /* Opera */ } 效果图: |
CopyRight 2018-2019 实验室设备网 版权所有 |