通过设置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. C++内存分配及变长数组的动态分配

    //------------------------------------------------------------------------------------------------ 第 ...

  2. myeclipse如何修改Web项目名称，eclipse如何修改项目名字

    myeclipse如何修改Web项目名称 1.复制一个现有的项目,重命名项目名称 2.这里的项目名称重新命名了,但是Web项目本质下的名称还是没有改变的.所以需要更改,更改方法-->选择项目右击 ...

  3. JavaScript-在当前显示区范围内实现点不到的小方块

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. [UCSD白板题] Least Common Multiple

    Problem Introduction The least common multiple of two positive integers \(a\) and \(b\) is the least ...

  5. .net framework 版本汇总

    Version Release Date 1.0.3705.0 1RTM 2002/2/13 1.0.3705.209 1SP1 2002/3/19 1.0.3705.288 1SP2 2002/8/ ...

  6. android控件

    ---恢复内容开始--- (1)文字大小的类型 px.dip.sp.pt.in.mm (2)TextView控件 超链接显示 属性autoLink="all" (3)EditTex ...

  7. Android中<original-package>标签含义

    在AndroidManifest.xml中,<original-package>与<manifest package=...>中的区别:<original-package ...

  8. [转] How to import a large data set using XPO efficiently within a transaction

    https://www.devexpress.com/Support/Center/Example/Details/T333879

  9. Android 多个include标签的监听事件处理

    include标签的作用是为了xml文件代码的模块化,详细不再多提.主要是说说include标签的监听. 网上也有很多例子,不过大多是只写了一个include标签的监听,如果需要实现多个include ...

  10. XCAT在虚拟机上部署系统

    xcat更新到2.13了,老的manual很多都没用了.前一整子居然没搞成功,只好再来试一次. 官网也搬到了xcat.org.首先就是下core和dep包 分别是 xCAT Core Packages ...