当前位置：九州下载 > 建站问答 >

css旋转属性如何理解

时间：2023-02-25 14:10编辑：九州下载来源：www.wzjsgs.com

1、css旋转属性为transform。

transform属性说明

2、transform属性将2D或3D转换为元素。这个特性允许我们旋转，缩放，移动或者倾斜元素。

transform属性旋转属性值:

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

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

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

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

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

实例

<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>DIV旋转属性的演示</title>
<metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE8"/>
<styletype="text/css">
body{
font-family:"Arial",sans-serif;
}
#example{
position:absolute;
border:#09Fsolid1px;
font-weight:900;
padding:10px;
display:block;
width:500px;
height:400px;
margin-top:-1px;
margin-left:-1px;
transform:rotate(40deg);
-o-transform:rotate(40deg);
-webkit-transform:rotate(40deg);
-moz-transform:rotate(40deg);
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='autoexpand',M11=1.2660444431189777,M12=-0.3327876096865394,M21=0.1127876096865398,M22=0.9660444431189779);
}
</style>
<!--[ifIE]>
<styletype="text/css">
#example{
top:50px;
left:50px;
}
</style>
<![endif]-->
</head>
<body>
<divid="example">旋转成功</div>
</body>
</html>

以上就是css旋转属性的介绍，希望对大家有所帮助。更多编程基础知识学习：python学习网

< 上一篇

css设置文字居中的两种方法

下一篇 >

js如何检查是否满足条件