旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转。如下图所示:

HTML代码:

<div class="wrapper">

<div></div>

</div>

CSS代码:

.wrapper {

width: 200px;

height: 200px;

border: 1px dotted red;

margin: 100px auto;

}

.wrapper div {

width: 200px;

height: 200px;

background: orange;

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

}

演示结果

变形--旋转 rotate()的更多相关文章

  1. CSS3 2D变形 transform---移动 translate(x, y), 缩放 scale(x, y), 旋转 rotate(deg), transform-origin, 倾斜 skew(deg, deg)

    transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 变形转换 ...

  2. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  3. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)(转载)

    在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45 ...

  4. canvas学习笔记(下篇) -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例(星空/时钟/小球)

    [下篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  5. css3动画属性系列之transform细讲旋转rotate

    1.语法: transform: none |  <transform-function> [<transform-function>]* 2.取值: none         ...

  6. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  7. 软件项目技术点(2)——Canvas之平移translate、旋转rotate、缩放scale

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transf ...

  8. 3D变形旋转

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. HDU 4998 (点的旋转) Rotate

    为了寻找等效旋转操作,我们任选两个点P0和Q0,分别绕这n个点旋转一定的角度后最终得到Pn和Qn 然后已知:P0和Pn共圆,Q0和Qn共圆.所以要找的等效旋转点就是这两个线段的垂直平分线交点O. 等效 ...

随机推荐

  1. USBDongle及Btool使用说明

    BLE 模块可使用开发套件中的 USB Dongle 模拟手机APP配合Btool.exe 进行蓝牙通讯测试. >连接 BLE 模块 USB Dongle 和模块的连接是通讯的基础,扫描连接的操 ...

  2. FTS抓包看L2CAP Connection的建立(一)

    一.概述     在前面的文章中介绍了inquiry和ACL connection的建立过程.这个连接建立后,L2CAP signaling channel(CID = 0x0001)就已经存在,可以 ...

  3. C#中Attribute介绍

    什么是特性? MSDN中定义为:公共语言运行时运行添加类似关键字的描述声明,叫做Attribute,它对程序中的元素进行标注,如类型.方法.字段和属性等.attribute和Microsoft.Net ...

  4. Combine String---hdu5727 &&& Zipper(LCS变形)

    题目链接:http://poj.org/problem?id=2192 http://acm.split.hdu.edu.cn/showproblem.php?pid=5707 http://acm. ...

  5. 经典Bug 修改方法

    右击工程名,“显示包内容”,删除提示错误的所有相关内容,(想当初,仅仅是删了一个图片,就各种报错,clean也没用,删了重新运行,也不成功.....有能力的话,最好能FQ,google你会发现很多技巧 ...

  6. 如何设置启动页 LaunchImage

  7. golang json string remove field

    golang中如何移除多余的field? 同样是json结构,不能像js 的json一样 delete key 直接移除,网上找了很多相似的,还没找到解决办法,先mark一下 感谢大神提供解决思路,设 ...

  8. [RVM is not a function] Interating RVM with gnome-terminal

    Ubuntu 12.04 64bit LTS, running the 'rvm use 1.9.3' brings the 'RVM is not a function' warning. Here ...

  9. PySe-002-Py-简单示例及编码设定

    非常简单而又国际化的例子 Hello World!在控制台依次输入命令:python, print "This is first program %s" % "Hello ...

  10. 二级c程序设计题(2)

    原文:http://www.cnblogs.com/imaker/p/6128049.html 所属年份:2010.9;2012.3编写函数fun,其功能是:根据以下公式求π的值(要求精度0.0005 ...