Home >Web Front-end >Front-end Q&A >How to rotate pictures with css
How to rotate pictures with css
- 藏色散人Original
- 2021-04-13 09:30:186098browse
How to rotate images in css: first create an HTML sample file; then create a div in the body; finally, use the transform attribute of css3 to rotate, scale, move or tilt the element.
The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.
How to rotate images with css?
css To set the image rotation effect, you can use the transform attribute of css3. The transform attribute applies 2D or 3D transformation to the element. This property allows us to rotate, scale, move or tilt the element.
transform attribute:
Usage syntax:
transform: none|transform-functions;
Internet Explorer 10, Firefox, and Opera support the transform attribute.
Internet Explorer 9 supports an alternative -ms-transform property (for 2D transforms only).
Safari and Chrome support alternative -webkit-transform properties (3D and 2D transforms).
Opera only supports 2D conversion.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
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 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>Rendering:
[Recommended learning: css video tutorial]
The above is the detailed content of How to rotate pictures with css. For more information, please follow other related articles on the PHP Chinese website!