通过设置transform:rotate()可以将元素进行不同角度的旋转：

下面是一些测试代码：

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 div

 {

 width:100px;

 height:75px;

 background-color:yellow;

 border:1px solid black;

 }

 div#div2

 {

 transform:rotate(30deg);

 -ms-transform:rotate(30deg); /* IE 9 */

 -moz-transform:rotate(30deg); /* Firefox */

 -webkit-transform:rotate(30deg); /* Safari and Chrome */

 -o-transform:rotate(30deg); /* Opera */

 }

 </style>

 </head>

 <body>

 <div>你好。这是一个 div 元素。</div>

 <div id="div2">你好。这是一个 div 元素。</div>

 <img src="//www.baidu.com/img/bd_logo1.png" alt="Flowers" >

 下面是旋转后的图片

 <br/>

 <img src="//www.baidu.com/img/bd_logo1.png" alt="Flowers" style='transform:rotate(90deg)'>

 </body>

 </html>

测试结果如下：

更多详细介绍：http://www.w3school.com.cn/css3/index.asp

在线测试地址：http://www.w3school.com.cn/tiy/t.asp?f=css3_transform_rotate

transform:rotate()将元素进行不同角度的旋转的更多相关文章

  1. 使用 SVG transform rotate 解决画框中的数字跟随旋转的问题

    问题描述 在图片上画框标注数字,旋转画布后,数字随之旋转,可读性不强,要求修改成无论画布怎么旋转,数字都是正向显示~ 原交互图示: 解决方案 先看下 dom 的结构 然后看下下面简单的代码 // 获取 ...

  2. 通过js获取元素css3的transform rotate旋转角度方法

    我们再试用jquery获取样式的时候是通过$('domName').css('transform'):的方式来获取元素的css样式,但是通过它获取到的css3的transform属性是以矩阵的方式呈现 ...

  3. 元素transform: rotate()之后，元素宽高该怎么计算？

    通常,利用transform: rotate()元素之后,我们并不会去在意元素大小的变化,因为看上去并没有什么变化.虽然看上去没有变化,其实是有变化的.下面用一个例子来说明一下. html: < ...

  4. 使用input range滑块，控制元素transform rotate旋转样式

    <!DOCTYPE html> <html> <head> </head> <body> <!-- 第一步:设置div旋转对象和inp ...

  5. 解决 border-radius 元素在应用了 transform 的子元素 时overflow:hidden 失效的问题

    受大家启迪,于是最近深入研究了一下Css3中的一些属性.之中也是碰到了个不为我知的问题,在这里特此总结并与大家分享. 问题重现:在父元素上应用了 border-radius 的圆角属性.加上  ove ...

  6. transform使用导致元素内字体出现模糊的坑~~~

    项目中遇到的,关于居中弹出层的字体模糊问题. 先来个对比图: 清晰版: 模糊版: 这个是一个不定宽高的弹出框,居中的方式如下代码: .layerdiv { position: fixed; top: ...

  7. Unity使用transform.Rotate进行三维旋转角度出现偏差

    Unity使用transform.Rotate进行三维旋转角度出现偏差 情形 最开始遇到该问题的情况比较复杂,另写了一个例子.情形如下: 一个立方体上挂载脚本: transform.Rotate(25 ...

  8. transform:rotate在手机上显示有锯齿的解决方案大全

    先来个兼容性说明,洗洗脑: div{transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate ...

  9. 拒绝IE8-,CSS3 transform rotate旋转动画效果（支持IE9+/chrome/firefox）

    <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...

随机推荐

  1. 我与solr(二)--导入mysql数据库

    关于solr的搭建详见上一篇的随笔. 步骤1: 在webapps中solrhome下新建一个文件夹名字叫做mynode(名字不固定,可以随便取,但是这个名字在后面的配置中会有所关联.)然后在mynod ...

  2. 第十四章：降维：奇异值分解SVD

  3. Shmget 参数 0600的解释

    Shmget 参数 0600的解释 0660 百位6 -- 本用户有读写权. 十位6 -- 同组用户有读写权,个位0 -- 其它用户无读写执行权.与chmod 设法一样.

  4. Hbase随笔2

    Hbase是建立在HDFS上的分布式数据库,下图是Hbase表的模型: Hbase这个数据库其实和传统关系数据库还是有很多类似之处,而不是像mongodb,memcached以及redis完全脱离了表 ...

  5. C++中的注解理解

    SAL: the Microsoft Source Code Annotation Language. SAL: the Microsoft Source Code Annotation Langua ...

  6. javadoc错误: 编码gbk的不可映射字符

    在使用Eclipse进行javadoc的导出时,提示“编码 GBK 的不可映射字符”,应该就是中文注释Eclipse不认,需要在调用javadoc.exe的时候传递编码集告诉它采用什么编码去生成jav ...

  7. maven里的modelVersion

    modelVersion 描述这个POM文件是遵从哪个版本的项目描述符

  8. 【转载】CentOS6.5_X64下安装配置MongoDB数据库

    [转载]CentOS6.5_X64下安装配置MongoDB数据库 2014-05-16 10:07:09|  分类: 默认分类|举报|字号 订阅      下载LOFTER客户端 本文转载自zhm&l ...

  9. WIN8 隐私声明

    隐私权声明 本应用连接网络仅为控制硬件设备,不会收集你的个人信息,也不共享你个个人信息. 应用名称 CrossMedia可视化控制系统(服务器版) 关于本应用 本应仅为控制设备应用,不关注任何配置相关 ...

  10. windows配置php开发环境

    1.安装xampp. xampp集成了php.prel.mysql.apache等网站工具,安装超简单,本身也超级好用.点击下载xampp 2.讲xmapp中的php配置到环境变量 比如我的xampp ...