Home > Article > Web Front-end > Can css images be rotated?

Can css images be rotated?

藏色散人Original: 2021-01-12 10:38:563892browse

css images can be rotated; in CSS, you can use the transform attribute and set the value to "rotate(angle)", "rotate3d(x,y,z,angle)", "rotateX(angle)" or "rotateY(angle)" and so on can be used to rotate the image.

The operating environment of this tutorial: windows7 system, HTML5&&CSS3 version, Dell G3 computer.

Recommended: css video tutorial

The transform attribute is applied to the 2D or 3D transformation of the element. This property allows you to rotate, scale, move, tilt, etc. the element.

Syntax:

transform: rotate(angle)|rotate3d(x,y,z,angle)|rotateX(angle)|rotateY(angle)|rotateZ(angle)

rotate(angle): Define 2D rotation, specify the angle in the parameter.

rotate3d(x,y,z,angle): Define 3D rotation.

rotateX(angle): Defines a 3D rotation along the X-axis.

rotateY(angle): Defines 3D rotation along the Y axis.

rotateZ(angle): Defines a 3D rotation along the Z axis.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
body
{
margin:30px;
background-color:#E9E9E9;
}
div.polaroid
{
width:294px;
padding:10px 10px 20px 10px;
border:1px solid #BFBFBF;
background-color:white;
/* Add box-shadow */
box-shadow:2px 2px 3px #aaaaaa;
}
div.rotate_left
{
float:left;
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
transform:rotate(7deg);
}
div.rotate_right
{
float:left;
-ms-transform:rotate(-8deg); /* IE 9 */
-webkit-transform:rotate(-8deg); /* Safari and Chrome */
transform:rotate(-8deg);
}
</style>
</head>
<body>
<div class="polaroid rotate_left">
<img src="pulpitrock.jpg" alt="" width="284"    style="max-width:90%">
<p class="caption">The pulpit rock in Lysefjorden, Norway.</p>
</div>
<div class="polaroid rotate_right">
<img src="cinqueterre.jpg" alt="" width="284"    style="max-width:90%">
<p class="caption">Monterosso al Mare. One of the five villages in Cinque Terre.</p>
</div>
</body>
</html>

Rendering:

Can css images be rotated?

The above is the detailed content of Can css images be rotated?. For more information, please follow other related articles on the PHP Chinese website!

html5 css css3 transform

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：css to achieve falling leaf animation effectNext article：css to achieve falling leaf animation effect

See more

Can css images be rotated?

Related articles