利用css怎么对图片进行旋转

发布时间:2021-01-12 15:44:58 作者:Leah
来源:亿速云 阅读:965

本篇文章为大家展示了利用css怎么对图片进行旋转,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

css图片可以旋转;在CSS中可以通过使用transform属性并设置值为“rotate(angle)”、“rotate3d(x,y,z,angle)”、“rotateX(angle)”或“rotateY(angle)”等实现旋转图片即可。

transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。

语法:

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

rotate(angle):定义 2D 旋转,在参数中规定角度。

rotate3d(x,y,z,angle):定义 3D 旋转。

rotateX(angle):定义沿着 X 轴的 3D 旋转。

rotateY(angle):定义沿着 Y 轴的 3D 旋转。

rotateZ(angle):定义沿着 Z 轴的 3D 旋转。

示例:

<!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" height="213">
<p class="caption">The pulpit rock in Lysefjorden, Norway.</p>
</div>
<div class="polaroid rotate_right">
<img src="cinqueterre.jpg" alt="" width="284" height="213">
<p class="caption">Monterosso al Mare. One of the five villages in Cinque Terre.</p>
</div>
</body>
</html>

效果图:

利用css怎么对图片进行旋转

上述内容就是利用css怎么对图片进行旋转,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. 使用java怎么对图片的角度进行旋转
  2. 怎么在Android利用Matrix对图片进行旋转

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:ipv6的特点有哪些

下一篇:cpu中的主要部件包括哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》