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

下面是一些测试代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <style>
  5.  div
  6.  {
  7.  width:100px;
  8.  height:75px;
  9.  background-color:yellow;
  10.  border:1px solid black;
  11.  }
  12.  div#div2
  13.  {
  14.  transform:rotate(30deg);
  15.  -ms-transform:rotate(30deg); /* IE 9 */
  16.  -moz-transform:rotate(30deg); /* Firefox */
  17.  -webkit-transform:rotate(30deg); /* Safari and Chrome */
  18.  -o-transform:rotate(30deg); /* Opera */
  19.  }
  20.  </style>
  21.  </head>
  22.  <body>
  23.  
  24.  <div>你好。这是一个 div 元素。</div>
  25.  
  26.  <div id="div2">你好。这是一个 div 元素。</div>
  27.  <img src="//www.baidu.com/img/bd_logo1.png" alt="Flowers" >
  28.  下面是旋转后的图片
  29.  <br/>
  30.  <img src="//www.baidu.com/img/bd_logo1.png" alt="Flowers" style='transform:rotate(90deg)'>
  31.  </body>
  32.  </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. 向MySql数据库导入excel表数据

    最近要开发一个小的答题系统,如果题目人工录入那确实很麻烦.所以想到是不是可以从用一些现有数据格式的文件导入数据.在网上查了一下,看到有关于将excel的数据导入到mysql的方法.所以将题库数据整理成 ...

  2. 20151013 C# 第一篇 流程控制语句

    20151013 流程控制语句: 1.选择语句 if … else if...else 选择语句 if(布尔表达式){  语句块:} if(布尔表达式){  语句块1:}else{  语句块2:} i ...

  3. 【转】使用Fiddler进行HTTP断点调试。

    这是Fiddler又一强大和实用的工具之一.通过设置断点,Fiddler可以做到: 1. 修改HTTP请求头信息.例如修改请求头的UA, Cookie, Referer 信息,通过“伪造”相应信息达到 ...

  4. Activity调用静态方法改变UI,使用Handler来改变UI显示

    本人菜鸟,请各位多多指点,不足之处,请斧正.没啥技术含量,就权当丰富下mono for android的小代码. Activity调用静态方法改变UI using System; using Andr ...

  5. Memcached & Redis使用

    Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度.Memcached ...

  6. CUTE-WRV2.1+TCP core(COM5402)的TCP带宽测试

    问题的提出 测试TCP的带宽,硬件平台CUTE-WRV2.1,固件版本WRPCV3.0+COM5402. 代码.工具及实现 1. 在固件中,增加模块,收到TCP数据包后不断地往外发数: library ...

  7. hdoj 1022 Train Problem I

    #include<stdio.h> int main() { int n,i,j,k; ],]; ]; while(scanf("%d %s %s",&n,in ...

  8. NSString进行urlencode编码

    今天在项目开发过程中,需要给webView传一个url,但是web端需要我将url中的一个变量进行urlencoding编码.这个主要原因是怕这个参数中存在一些转义字符,ok!这个没有问题,一开始我只 ...

  9. c一些关键字

    register:这个关键字请求编译器尽可能的将变量存在CPU内部寄存器中,而不是通过内存寻址访问,以提高效率.注意是尽可能,不是绝对. extern:可以置于变量或者函数前,以标示变量或者函数的定义 ...

  10. 扫描二维码判断移动设备（Android/ios），以及判断是否微信端扫描

    <section class="download"> <a href="apk地址" class="android" st ...