通过设置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. Oracle中rownum和rowid的理解(转）

    本文转自地址http://www.linuxidc.com/Linux/2012-04/58300.htm rownum,rowid都叫伪列. 但是,rownum是逻辑上的编号,且其值总是从1开始,每 ...

  2. C#内存释放

    看微软件的宣传说NET会自动回收内存.以前一直以为NET会自动回收也没有去细看. 近来发现NET下的winForm程序,默认情况下不会自动释放内存.如果是循执行的程序内存会不断增大.具体会大到多少没有 ...

  3. ContentProvider要点复习

    ContentProvider要点复习 ContentProvider作为四大组件之一,发挥着举足轻重的作用.与之相关联的另外两个类分别是ContentResolver和ContentObserver ...

  4. linux系统启动时更改MAC地址

    vim /etc/rc.local #change the server's MAC address("00:50:56:84:5C:76" change to 00:50:56: ...

  5. Linux命令之route - 显示和操作IP路由表

    转自:  http://codingstandards.iteye.com/blog/1125312 用途说明 route命令用于显示和操作IP路由表(show / manipulate the IP ...

  6. pundit

    gem "pundit" Include Pundit in your application controller: class ApplicationController &l ...

  7. WebBench源码分析与心得

    源码:https://github.com/EZLippi/WebBench   关键全局变量: speed 成功次数 failed 失败次数 bytes 接收字节数 benchtime 执行时长(秒 ...

  8. a标签创建超链接，利用a标签创建锚点

    #Html今日学习内容 <!DOCTYPE html> <html> <head lang="en">     <meta charset ...

  9. Hibernate快照

    l当session加载了某个对象后,会为该对象的值类型的属性复制一份快照.当刷出缓存时,通过比较对象的当前属性和快照,来判断对象的哪些属性发生了变化. 代码如下: /** * 修改学生信息 */ @T ...

  10. caffe在windows 下的配置及matlab接口编译（无GPU）

    本人机子windows 10,matlab2015a,vs2013(官网使用的是vs2013) 1.首先去github上下载caffe的windows包,地址:https://github.com/B ...