变形--旋转 rotate()
旋转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()的更多相关文章
- CSS3 2D变形 transform---移动 translate(x, y), 缩放 scale(x, y), 旋转 rotate(deg), transform-origin, 倾斜 skew(deg, deg)
transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 变形转换 ...
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)(转载)
在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45 ...
- canvas学习笔记(下篇) -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例(星空/时钟/小球)
[下篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- css3动画属性系列之transform细讲旋转rotate
1.语法: transform: none | <transform-function> [<transform-function>]* 2.取值: none ...
- Canvas绘图之平移translate、旋转rotate、缩放scale
画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...
- 软件项目技术点(2)——Canvas之平移translate、旋转rotate、缩放scale
AxeSlide软件项目梳理 canvas绘图系列知识点整理 画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transf ...
- 3D变形旋转
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HDU 4998 (点的旋转) Rotate
为了寻找等效旋转操作,我们任选两个点P0和Q0,分别绕这n个点旋转一定的角度后最终得到Pn和Qn 然后已知:P0和Pn共圆,Q0和Qn共圆.所以要找的等效旋转点就是这两个线段的垂直平分线交点O. 等效 ...
随机推荐
- 怎么样用opencv将彩色图片转化成像素值只有0和255的灰度图?
分类: OpenCV [Q1]怎么样用opencv将彩色图片转化成像素值只有0和255的灰度图? 进行灰度化,IplImage* pImg = cvLoadImage( "C:\\1.b ...
- 转: css box-sizing的用法
當你設定一個元素樣式為 box-sizing: border-box;,這個元素的內距和邊框將不會增加元素本身的寬度. <!DOCTYPE html> <html lang=&quo ...
- The All-purpose Zero---hdu5773(LIS变形)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5773 题意: 给出n个数,其中 0 可当作任何数,求能够得到的最长上升子序列(严格上升)的长度; 我们 ...
- Linux console on LCD
有时候需要将开机启动的信息输出到LCD上,并且在终端上进行调试.本文记录更改的方法. 参考链接 http://blog.csdn.net/chenbang110/article/details/787 ...
- 转帖:解决jquery.js在myeclipse中报错的问题
转载地址:http://tieba.baidu.com/p/1993753087 从官方下载的jquery.js在myeclipse始终用个大大的红叉,看着很不爽,如何解决呢:jquery.js在my ...
- AD834+表面声波滤波器调试小结
AD834:带宽较宽,300M无压力,但是输出幅度小,当输入2VPPX2VPP的时候最大输出400mVPP.一个特别要注意的地方是输入走线尽量短,敷铜间距至少满足3倍线宽,不然隔直之后还会耦合信号进去 ...
- .NET(c#)new关键字的三种用法
前几天去家公司面试,有一道这样的题:写出c#中new关键字的三种用法,思前想后挖空心思也只想出了两种用法,回来查了下msdn,还真是有第三种用法:用于在泛型声明中约束可能用作类型参数的参数的类型,这是 ...
- Using dbms_shared_pool.purge to remove a single task from the library cache
我们都知道可是使用 alter system flush shared_pool 来清除shared pool 信息,当时不能指定清除某个对象.因为在系统繁忙的时侯 使用 alter system f ...
- POJ1528问题解答
#include <iostream>#include <cstdio>#include <cmath> #include <string>#inclu ...
- saltstack之(九)配置管理源码部署Nginx
场景:rpm包安装的nginx服务,无法满足定制模块的需求,故线上环境使用nginx源码进行安装.本片文章详细介绍如何使用saltstack的配置管理功能实现nginx软件的源码安装. 下载源码:pc ...