变形--旋转 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. 等效 ...
随机推荐
- Moogoose操作之Schema实现增删查改
Schema不仅定义了文档结构和使用性能,可以为后面的Model和Entity提供公共的属性和方法. Schema.Model.Entity的关系: Schema : 可以定义字段类型,不具备数据库的 ...
- The Bip Buffer - The Circular Buffer with a Twist
Introduction The Bip-Buffer is like a circular buffer, but slightly different. Instead of keeping on ...
- 【上手centos】一、前情以及sublime_text_3安装
笔记本自大一入手,只重装过一次系统,从不曾拆机清灰过.读研之后,日常工作与学习都在实验室进行,笔记本一直在宿舍的桌子上落灰,只偶尔打开来看个电影.上周末,心血来潮,把笔记本抱到实验室拆了清灰,以前一直 ...
- Asp.Net MVC 使用Entity Framework创建模型类
先来说说LINQ to SQL和Entity Framework的区别: LINQ to SQL和Entity Framework都是一种包含LINQ功能的对象关系映射技术.他们之间的本质区别在于EF ...
- imx6 启动 init进程
之前不知道imx6内核是怎么启动文件系统的init进程,查了下资料,记录于此,以后再来补充. kernel/init/main.c static noinline int init_post(void ...
- Docker 介绍以及其相关术语、底层原理和技术
https://ruby-china.org/topics/22004 Docker是啥 Docker是一个程序运行.测试.交付的开放平台,Docker被设计为能够使你快速地交付应用.在Docker中 ...
- svn使用svnsync实现双机热备
前提条件: 主:10.11.100.205从:10.11.100.50 源目录:http://10.11.100.205/svn/rep-ops目标目录:http://10.11.100.50/svn ...
- ionic环境搭建和安装
1. 安装node环境 nodeJs环境的安装很简单,去官网下载最新版的NodeJs直接安装即可. Node官网: https://nodejs.org/ 安装完成后配置环境变量,计算机->属性 ...
- Bash中的shopt选项
Bash中的shopt选项 http://blog.chinaunix.net/uid-20587169-id-1919110.html shopt命令用于显示和设置shell中的行为选项,通过这些选 ...
- iOS多线程知识总结--GCD
iOS多线程知识总结--GCD 1. iOS中苹果提供4钟方案来帮助我们实现多线程: (1) 纯C语言的pthread,偏底层,需要程序员手动管理线程的生命周期,基本不用. (2) OC语言的NSTr ...