变形--旋转 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. 等效 ...
 
随机推荐
- IOS常见的三种回调方法介绍
			
认识下三种IOS常见的回调模式. 代理模式作为IOS中最常见的通讯模式,代理几乎无处不在. 这里有一个数组,我们首先通过代理的方式将数组传递到其他方法中去. 设置协议及方法 @protocol Cal ...
 - 使用多种客户端消费WCF RestFul服务(四)——Jquery篇
			
Jquery篇 互联网开发中少不了各类前端开发框架,其中JQUERY就是最流行之一,本篇我们就采用JQUERY来消费WCF RestFul服务,其中用到JSON基础知识,如果有想了解的朋友,请访问:& ...
 - css3 transform动画效果与公司框架简易动画的差异
			
先看一下该网站的效果 http://2014guangzhouchezhan.dongfeng-citroen.com.cn/mobile/ 该站里面的动画效果由简易动画与css3动画2种方式混合达到 ...
 - SQL 2008 RAISERROR语法在SQL 2012/2014不兼容问题
			
原文 旧的RAISERROR语法在SQL 2012不兼容问题 raiserror 写法: SQL 2008: raiserror 55030 'text error' SQL 2012: raiser ...
 - leetcode:Factorial Trailing Zeroes
			
Given an integer n, return the number of trailing zeroes in n!. 最初的代码 class Solution { public: int t ...
 - imx6 uboot lvds clock
			
在uboot中添加logo,lvds接口的lcd显示不正常,出现波动.网上说是lvds时钟频率的问题. 使用示波器测量之后,发现频率是60M,而lcd最大频率才46.8M. 因此就需要更改uboot中 ...
 - In App Purchase Statuses
			
In App Purchase StatusesThe following are the available states that can be assigned to your in app p ...
 - Encode & decode
			
1. 埃特巴什码 (Aitebashen Password) Definition: 最后一个字母代表第一个字母,倒数第二个字母代表第二个字母. 常文:a b c d e f g h i j k l ...
 - 10月12号 晚八点 Speed-BI 云平台-基于Excel数据源的管理驾驶舱构建全过程,腾讯课堂开课啦
			
认真地做了一大摞一大摞的报表,老板没时间看?努力把能反馈的内容都融汇进图表里,老板嫌复杂?做了几个简单的报表,老板一眼就觉得信息不全面?每个报表都用了各种各样的图表,老板却毫无兴趣?明明很努力了,为什 ...
 - K线指标线计算方法
			
指标线计算方法 l dataDR = Kdata(原始数据)/dr(除权) //除权数据等于原始数据除以DR(除权) 其中,日K数据 需要本地进行除权处理.周K和月K的旧数据部分由服务器进行处理 ...