【说站】css旋转属性如何理解
2023-06-13 09:13:17 时间
css旋转属性如何理解
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DIV旋转属性的演示</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<style type="text/css">
body {
font-family: "Arial", sans-serif;
}
#example {
position: absolute;
border: #09F solid 1px;
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='auto expand', M11=1.2660444431189777, M12=-0.3327876096865394, M21=0.1127876096865398, M22=0.9660444431189779);
}
</style>
<!--[if IE]>
<style type="text/css">
#example {
top: 50px;
left: 50px;
}
</style>
<![endif]-->
</head>
<body>
<div id="example"> 旋转成功</div>
</body>
</html>
以上就是css旋转属性的介绍,希望对大家有所帮助。
本文教程操作环境:windows7系统、css3版,DELL G3电脑。
相关文章
- CSS Flex弹性布局详解! (常用的12个属性)
- kotlin延迟属性
- css规则定义的分类,CSS规则定义英汉对照表[通俗易懂]
- 滚动效果——marquee的html样式和CSS属性
- 【说站】css中justify-content属性是什么
- 【说站】css中flex-wrap属性是什么
- 【说站】css中flex-direction属性是什么
- 【说站】css中order属性的介绍
- gridview的属性_grid css
- 【新!超详细】Figma组件属性完全指南
- CSS属性继承有哪些?(回顾)
- CSS 边框属性总结
- 【Unity3D】游戏物体操作 ② ( 3D 原生物体 | 立方体 | 球体 | 平面 | 物体移动 | 沿坐标轴移动 | 沿坐标平面移动 | 在 Inspector 检查器窗口设置坐标属性 )
- Python __file__属性:查看模块的源文件路径
- java属性文件properties常用操作工具类详解编程语言
- CSS 中 display:inline-block 属性使用详解编程语言
- MySQL数值属性相减操作简介(MySQL两属性相减)
- 推荐深入理解css中的position定位和z-index属性
- CSS关于网页图片的属性
- javascript中的prototype属性使用说明(函数功能扩展)
- php压缩多个CSS为一个css的代码并缓存
- 如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
- js调用css属性写法
- 变量声明时命名与变量作为对象属性时命名的区别解析