旋转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. sql 语句查询练习题

    1. 查询Student表中的所有记录的Sname.Ssex和Class列. select sname,ssex,class from student 2. 查询教师所有的单位即不重复的Depart列 ...

  2. 在windows下创建一个Mongo服务

    首先需要下载mongo的安装包 cmd.exe 这个需要用管理员权限打开 进入到mongo的安装目录 首先到C盘根据下面的命令手动创建一个 Data 文件夹 在Data 里面创建一个db文件夹一个lo ...

  3. Java回调实现

    一.回调的形式 1. C.C++和Pascal允许将函数指针作为参数传递给其它函数.JavaScript,Python,和PHP允许简单的将函数名作为参数传递. 2. .NET Framework的语 ...

  4. Moogoose操作之Schema实现增删查改

    Schema不仅定义了文档结构和使用性能,可以为后面的Model和Entity提供公共的属性和方法. Schema.Model.Entity的关系: Schema : 可以定义字段类型,不具备数据库的 ...

  5. JDK中的URLConnection参数详解

    针对JDK中的URLConnection连接Servlet的问题,网上有虽然有所涉及,但是只是说明了某一个或几个问题,是以FAQ的方式来解决的,而且比较零散,现在对这个类的使用就本人在项目中的使用经验 ...

  6. JavaScript正则表达式(三)

    正则表达式可以: •测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证 •替换文本.可以在文档中使用一个正则表达式 ...

  7. 2014-4-25 运行号:837344 ASCII码排序

    #include <iostream> #include <cstdio> #include <cstdlib> #include <string> # ...

  8. 关于Xib 需要注意的地方

    当你需要写一个繁琐的界面但是又是静态页面时,很可能会用到xib [特例:创建继承于UIView的文件时,不带自动生成xib的勾选项,需要开发人员手动new一个同名的xib文件,在该xib文件右侧的cl ...

  9. Asp.Net MVC 使用Entity Framework创建模型类

    先来说说LINQ to SQL和Entity Framework的区别: LINQ to SQL和Entity Framework都是一种包含LINQ功能的对象关系映射技术.他们之间的本质区别在于EF ...

  10. 我的工具箱之TortoiseSVN-1.7.11.236000

    下载地址:http://pan.baidu.com/s/1hqY3h6c SVN windows版,项目团队合作必要的协作工具.