css3 2D变换 transform
- 旋转函数rotate()，deg表示度数，transform-origin表示旋转的基点
<head>
<title>无标题文档</title>
<style>
body{height:400px;border:1px solid #000;}
.box{width:100px;height:100px;background:red;margin:100px auto 0; transition:2s;}
body:hover .box{ -webkit-transform:rotate(360deg);}
</style>
</head>
<body>
<div class="box">111</div>
</body> - 斜切，将矩形等形状扭曲，skewX(100deg),skrewY(30deg),以及x方向和y方向都斜切skew(15deg, 30deg)
<head>
<title>无标题文档</title>
<style>
body{height:400px;border:1px solid #000;}
.box{width:100px;height:100px;background:Red;margin:100px auto 0; transition:2s;}
body:hover .box{ -webkit-transform:skewX(45deg);}
</style>
</head>
<body>
<div class="box">111</div>
</body> - 缩放，scale()
<head>
<title>无标题文档</title>
<style>
body{height:400px;border:1px solid #000;}
.box{width:100px;height:100px;background:Red;margin:100px auto 0; transition:2s;}
body:hover .box{ -webkit-transform:scale(2);}
</style>
</head>
<body>
<div class="box">111</div>
</body> - 位置移动，translate(100px 200px)，translateX(100px)，translateY(200px)
<head>
<title>无标题文档</title>
<style>
body{height:400px;border:1px solid #000;}
.box{width:100px;height:100px;background:Red;margin:100px auto 0; transition:2s;}
body:hover .box{ -webkit-transform:translate(-100px,200px);}
</style>
</head>
<body>
<div class="box">111</div>
</body>
css3 2D变换 transform的更多相关文章
- CSS3 2D 变换
CSS2D transform 表示2D变换,目前获得了各主流浏览器的支持,是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,可以取代大量之前只能靠Flash才 ...
- css3 -- 2D变换
1.transform 1 E{ 2 -moz-transform:function(value): 3 -ms-transform:function(value): 4 -o-transform:f ...
- CSS3 2D Transform
在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和 ...
- css3 过渡和2d变换——回顾
1.transition 语法:transition: property duration timing-function delay; transition-property 设置过渡效果的css ...
- css3 2D转换（2D Transform） 动画（Animation）
transform 版本:CSS3 内核类型 写法 Webkit(Chrome/Safari) -webkit-transform Gecko(Firefox) -moz-transform Pres ...
- IT兄弟连 HTML5教程 CSS3属性特效 2D变换1
通过CSS3转换,能够对元素进行移动.缩放.转动.拉长或拉伸.它如何工作?转换是使元素改变形状.尺寸和位置的一种效果.CSS3转换包括2D转换和3D转换,本小结我们来了解2D变换的转换方法. 转换属性 ...
- 详解如何用 CSS3 完成 3D transform变换
Tips:阅读提示!!! 首先,本文针对的是3D transform变换的学习,所以你需要对 2D transform变换 有一定的了解 其次,需要说明的是,代码是一种需要自己不断实践的学科,建议各位 ...
- CSS3(3)---2D变形(transform)
CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一,它常用的属性有:移动(translate).缩放(scale).旋转(rotate).倾斜 (skew). ...
- HTML 学习笔记 CSS3 (2D Matrix)
Matrix 矩阵 那么什么是矩阵呢? 矩阵可以理解为方阵,只不过 平时方阵里面站着人 矩阵中是数值: CSS3中的矩阵: css3中的矩阵指的是一个方法,书写为matrix() 和 matrix3d ...
随机推荐
- X86架构与ARM架构比较
引言 CPU是怎样运作的? CPU的运作与人脑的运作差不多.先谈一下人这个系统的工作方式.眼镜.耳朵.舌头.皮肤等等感觉器官接收到“触觉”,把信息传给大脑,大脑把信息处理后,把处理结果送给手.脚.嘴等 ...
- UIDevice-b
typedef NS_ENUM(NSInteger, UIDeviceOrientation) //设备方向 { UIDeviceOrientationUnknown, UIDeviceOrienta ...
- Adobe Acrobat XI Pro 两种破解方式 Keygen秘钥 license替换 亲测有效
大家平时看paper比较多的话想必都是用Adobe Acrobat而非Adobe Reader吧,其功能全面之处就不啰嗦了,下面给大家分享下Adobe Acrobat XI Pro的两种破解方式(两种 ...
- 求解：远程方法调用失败Exception from HRESULT: 0x800706BE)
服务器:Windows Server2003 sp2服务器 客户端:XP SP3 内容:C#Winform客户端调用服务器的Excel模板生成报表的时候,生成失败,抛出的异常如下: TargetInv ...
- For循环复杂练习
for是循环当中经常用到的一个结构,练熟了才可以. 练习-需求描述: 在控制台打印以下形式的字符: * * * * * * * * * * * * * * * 思路,首先分析需求的规律 1.首先分析需 ...
- Linux下如何查看高CPU占用率线程 LINUX CPU利用率计算
目录(?)[-] proc文件系统 proccpuinfo文件 procstat文件 procpidstat文件 procpidtasktidstat文件 系统中有关进程cpu使用率的常用命令 ps ...
- 数据结构（Splay平衡树）：HAOI2008 排名系统
[HAOI2008] 排名系统 [题目描述] 排名系统通常要应付三种请求:上传一条新的得分记录.查询某个玩家的当前排名以及返回某个区段内的排名记录.当某个玩家上传自己最新的得分记录时,他原有的得分记录 ...
- 数据结构(RMQ)：POJ 3624 Balanced Lineup
Balanced Lineup Description For the daily milking, Farmer John's N cows (1 ≤ N ≤ 50,000) always li ...
- 【模拟】Codeforces 707A Brain's Photos
题目链接: http://codeforces.com/problemset/problem/707/A 题目大意: 给一张N*M的图,只有六种颜色(如下),只含B,W,G的是黑白图,否则是彩色图.问 ...
- 使用XRDP实现Windows远程桌面Linux系统
一般情况下我们用ssh客户端远程登陆Linux系统,至于图形界面下的linux远程登陆工具,我们一般都会想到vnc,但它的安全性不够,在这里,我将介绍XRDP的安装配置方法.我们可以很方便的通过Win ...