通过设置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. HDU 4336 Card Collector (期望DP+状态压缩 或者 状态压缩+容斥)

    题意:有N(1<=N<=20)张卡片,每包中含有这些卡片的概率,每包至多一张卡片,可能没有卡片.求需要买多少包才能拿到所以的N张卡片,求次数的期望. 析:期望DP,是很容易看出来的,然后由 ...

  2. Auto_increment详解

    Auto_increment Mysql AUTO_INCREMENT 1.Innodb表的自动增长列可以手工插入,但是插入的值如果是空或者0,则实际插入的将是自动增长后的值 mysql> cr ...

  3. JAVA里的异常

    一.概念和分类 JAVA程序设计语言中,异常对象都是Throwable类的一个实例.Throwable分为Error和Exception. 其中,Error类层次结构描述了JAVA运行时系统的内部错误 ...

  4. 【dubbo】dubbo控制台搭建

    1.gitHub上下载dubbo 2.cmd下运行 cd ~/dubbomvn clean install -Dmaven.test.skip 3.cd ~/dubbo/dubbo-admin mvn ...

  5. If you really want to compile without asm, configure with --disable-asm.

    真是一个奇葩问题,对我来说是的,完全不知道是什么意思,但是他就是出现了. 找到了一个相关问题http://trac.ffmpeg.org/wiki/How%20to%20quickly%20compi ...

  6. kafka及zookeeper安装

    kafka_2.9.2-0.8.1.tgzzookeeper-3.4.8.tar.gz 安装 zookeeper1 export PATH=$PATH:/usr/local/zookeeper/bin ...

  7. Main()

    P25 “每一个c#可执行文件都必须有一个入口——Main()方法” 我一直对这个Main()方法有一些疑问. 那就是这里头的参数. 在JAVA里,main(String args[])中的参数是绝对 ...

  8. poj 1195 - Mobile phones(树状数组)

    二维的树状数组,,, 记得矩阵的求和运算要想好在写.... 代码如下: #include <cstdio> #include <cstdlib> #include <cm ...

  9. ansible 自动化(3)

    批量执行playbooks 远程批量命令执行的另外一种方式是用playbooks:这里是playbooks的官方文档:http://docs.ansible.com/playbooks.html这里有 ...

  10. Apache HTTP Server 2.2.26 发布

    Apache遗留产品线2.2.26发布.2013-11-13 之前的版本是2013-07-02的2.2.25 同样先在开发目录下放出下载,然后放到正式目录下.修正了大量的Bug.目前的稳定版2.4系列 ...