CSS3 2D 变换
CSS2D transform 表示2D变换,目前获得了各主流浏览器的支持,是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、倾斜、缩放,甚至支持矩阵方式,可以取代大量之前只能靠Flash才可以实现的效果。
一、定义移动(translate)
translate() 函数能够重新定位元素的坐标,包含两个参数,分别用来定义 x轴和 y轴坐标。
语法格式:
transform:translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动) // x、y可为负值
transform:translateX(x)仅水平方向移动(X轴移动)
transform:translateY(Y)仅垂直方向移动(Y轴移动)
Tips:如果是用百分比来表示,则参考的是自己本身。例:transform:translate(-50%,-50%); /* 走的自己盒子的一半 */
二、定义缩放
scale() 函数能够缩放元素大小,包含两个参数,分别用来定义宽和高缩放比例。
语法格式:
transform:scale(<number>[,<number>])
- 参数可以是正数、负数和小数;默认值为1;
- 如果是两个参数,分别对应着宽度和高度,如果有一个参数,则另一个参数同第一个,如果想另外一个不变化,必须写上 1(不缩放)。
- 正数表示基于指定的宽度和高度将放大元素,
- 负数值不会缩小元素,而是翻转元素,然后再缩放元素。(即 负号只是翻转元素,具体的缩放要取决于后面数值是1还是小于1)
- 使用小于 1 的小数可以缩小元素,即缩小到原来的多少倍。
三、定义旋转
rotate() 函数能够旋转指定的元素对象,主要在二维空间进行操作,接收一个角度参数值,用来指定旋转的幅度。
语法格式:
transform:rotate(45deg); // 注意单位是 deg 度数
Tips:正值为顺时针,负值为逆时针;
四、定义变换原点
CSS 变换的原点默认为对象的中心点,如果要改变这个中心点,可以使用 transform-origin 属性进行定义。
语法格式:
transform-origin:属性值1,属性值2;
- 属性值初始值为 50%,50%,即元素中心的,适用于块级元素和行内元素;
- 属性值可以是 left、right、center、bottom、top 等描述性关键字;
- 也可以是百分比、em、px 等具体的值;
五、定义倾斜
skew() 函数能够让元素倾斜显示,该函数包含两个参数值,分别用来定义 x 轴 和 y 轴坐标倾斜的角度。
语法格式:
transform:skew(角度值1,角度值1); // 注意单位是 deg 度数
- 第一个参数表示相对于 x 轴进行倾斜,第二个参数表示相对于 y 轴进行倾斜;
- 如果省略了第2个参数,则第2个参数默认值为 0 ;
六、定义矩阵
matix() 是矩阵函数,调用该函数可以非常灵活的实现各种变换效果。
语法格式:
matrix(<number>,<number>,<number>,<number>,<number>,<number>,)
- 第1个参数控制 x 轴缩放;
- 第2个参数控制 x 轴倾斜;
- 第3个参数控制 y 轴倾斜;
- 第4个参数控制 y 轴缩放;
- 第5个参数控制 x 轴移动;
- 第6个参数控制 y 轴移动;
Tips:transform 可以设置多个变换函数来实现更多的特效。
CSS3 2D 变换的更多相关文章
- css3 -- 2D变换
1.transform 1 E{ 2 -moz-transform:function(value): 3 -ms-transform:function(value): 4 -o-transform:f ...
- css3 2D变换 transform
旋转函数rotate(),deg表示度数,transform-origin表示旋转的基点 <head> <title>无标题文档</title> <style ...
- CSS3 2D Transform
在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和 ...
- css3 过渡和2d变换——回顾
1.transition 语法:transition: property duration timing-function delay; transition-property 设置过渡效果的css ...
- IT兄弟连 HTML5教程 CSS3属性特效 2D变换1
通过CSS3转换,能够对元素进行移动.缩放.转动.拉长或拉伸.它如何工作?转换是使元素改变形状.尺寸和位置的一种效果.CSS3转换包括2D转换和3D转换,本小结我们来了解2D变换的转换方法. 转换属性 ...
- HTML 学习笔记 CSS3 (2D转换)
2.scaleX(<number>) : 使用 [sx,1] 缩放矢量执行缩放操作,sx为所需参数.scaleX表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1),其基点一样是在 ...
- css3 2d转换3d转换以及动画的知识点汇总
css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值 ...
- css3 2D转换(2D Transform) 动画(Animation)
transform 版本:CSS3 内核类型 写法 Webkit(Chrome/Safari) -webkit-transform Gecko(Firefox) -moz-transform Pres ...
- CSS3☞transform变换
transform CSStransform属性允许你旋转,缩放,倾斜或平移给定元素.这是通过修改CSS视觉格式化模型的坐标空间来实现的. DEMO /* Keyword values */ tran ...
随机推荐
- matlab-画地形图
1.画三维图 之前画曲面的三维图,运用z=x2+y2 算出z和Z,如果是给出数据的地形则没办法用公式算,为此,引入插值自动造出地形的坐标. 拟合和插值的区别:插值是必须要过点,曲线可以不光滑:拟合则是 ...
- Ql004(母牛的故事)
一,看题目 1,这个虽然我不想说,但是我确实不会,但是我的意思是你可以不会但是不能每次都不会那咋办? 二,看题解 1,你得大概知道这个东西是考啥的(虽然这个东西提前给你说了是d递归),但是考试肯定没人 ...
- 关于System.InvalidOperationException异常
什么是InvalidOperationException 操作无效异常.当方法调用对对象的当前状态无效时引发的异常. 继承 Object Exception SystemException Inval ...
- GLIBC中的库函数fflush究竟做了什么?
目录 目录 1 1. 库函数fflush原型 1 2. FILE结构体 1 3. fflush函数实现 2 4. fclose函数实现 4 附1:强弱函数名 5 附2:属性__visibility__ ...
- 【JZOJ5740】【20190706】幻想世界
题目 小 $\omega $ 想要进行烟火表演,她一开始有\(n\)颗彗星和\(n\)颗陨石 如果小 \(\omega\) 有\(i\)颗彗星而没有陨石,那么她会消耗\(i\)颗彗星并得到\(a_i\ ...
- spark基础知识二
主要围绕spark的底层核心抽象RDD进行理解.主要包括以下几个方面 RDD弹性分布式数据集的概念 RDD弹性分布式数据集的五大属性 RDD弹性分布式数据集的算子操作分类 RDD弹性分布式数据集的算子 ...
- R包的安装 卸载 加载 移除等
R包的安装 1)使用 Rstudio 手动安装 Rstudio的窗口默认为四个,在右下角的窗口的 packages 下会显示所有安装的 R 包 点击 Install -> 输入R 包名 -> ...
- quick 中 "我的项目" 中的列表从那里来的?
quick 中 "我的项目" 中的列表从那里来的? 1. WelcomeScene.lua 场景 self:createOpenRecents(cc.player.settings ...
- Linux笔记本合上屏幕不待机
Linux笔记本合上屏幕不待机[]# vim /etc/systemd/logind.conf# This file is part of systemd.## systemd is free sof ...
- 【caffe编译】 fatal error: hdf5.h: 没有那个文件或目录
src/caffe/layers/hdf5_output_layer.cpp:3:18: fatal error: hdf5.h: 没有那个文件或目录 查找文件 locate hdf5.h 修改Mak ...