css旋转属性如何理解
2023-09-11 14:18:27 时间
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 旋转。
实例
CSS
<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电脑。
相关文章
- ASP.NET MVC深入浅出(被替换) 第一节: 结合EF的本地缓存属性来介绍【EF增删改操作】的几种形式 第三节: EF调用普通SQL语句的两类封装(ExecuteSqlCommand和SqlQuery ) 第四节: EF调用存储过程的通用写法和DBFirst模式子类调用的特有写法 第六节: EF高级属性(二) 之延迟加载、立即加载、显示加载(含导航属性) 第十节: EF的三种追踪
- 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?
- 【Css】Css有关html“属性选择器”的语法合集(示例)
- OpenCV的Mat类对象的初始化、属性调整、属性获取、基本操作示例代码积累
- [UWP]附加属性2:实现一个Canvas
- [转] javaweb学习-jstl-<c:forEach>中 varStatus的属性简介
- 获取当前this的属性
- js 修改css属性值
- 《HTML、CSS、JavaScript 网页制作从入门到精通》——6.2 表格基本属性
- 《HTML、CSS、JavaScript 网页制作从入门到精通》——6.5 表格的行属性
- 《Adobe Flash CS4中文版经典教程》——1.6 使用“属性”检查器
- 《互联网产品设计》一1.2 产品属性
- Qt编写控件属性设计器10-导出xml
- 强弱类型对应赋值操作,动静类型对应多态属性-类型的强弱对应着类型的一致性和类型转换,类型的动静对应着类型的行为
- Vue3之计算属性和监视
- 微信小程序自定义组件的坑之 hidden、boolean 属性和花括号
- NuxtJS处理因css在服务端渲染而增加源代码量,从而影响到SEO的问题及VUE提取 CSS 到单个文件
- 浅析如何让css元素左侧自动溢出(即 ... 溢出在左侧):direction 属性
- Untiy 灯光属性介绍
- C# Aop简单扫盲及ORM实体类属性拦截示例
- python+selenium:解决上传文件<input type='file'>标签属性被css的visibility隐藏导致无法定位元素的问题
- pandas属性和方法
- CSS属性之word-break:break-all强制性换行
- CSS outline 属性