CSS3 -webkit-transform(元素变换)

 

-webkit-transform:none | 类型

类型:scale:缩放,1为原始大小。scale(x)。正数放大,负数缩小。属性值为一个时,x/y轴同时缩放;属性值为两个值时,分别控制x、y轴的缩放。

rotate:水平旋转,属性值格式为Xdeg。(deg是“度”的意思)rotate(Xdeg)。X为正数时,顺时针旋转;为负数时,逆时针旋转

translate:平移,基于XY轴重新定位元素。translate(Xpx,Ypx)。属性值为一个时,x、y轴参数相同;为两个时,x、y轴分别定位

skew:将元素沿水平方向倾斜变形。skew(Xdeg,Ydeg)。这个比较难表述,想象一下平行四边形吧。属性值为一个时,x、y轴参数相同;为两个时,x、y轴各自倾斜

matrix:矩阵

示例:

  

.body{
margin-top: 3%;
-webkit-transform: scale(0.8,0.3); /*设置放大缩小*/
}

CSS3 -webkit-transform(元素变换)的更多相关文章

  1. 好吧,CSS3 3D transform变换,不过如此!

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  2. 好吧,CSS3 3D transform变换,不过如此!——张鑫旭

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  3. 关于CSS3中transform变换的小坑

    2017年6月30日15:05:46 今天在写一个demo的时候,发现CSS3中transform变换的一个特性. 首先,我先描述一下我发现的情况(问题再现): <div class=" ...

  4. 第98天:CSS3中transform变换详解

    transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...

  5. 通过js获取元素css3的transform rotate旋转角度方法

    我们再试用jquery获取样式的时候是通过$('domName').css('transform'):的方式来获取元素的css样式,但是通过它获取到的css3的transform属性是以矩阵的方式呈现 ...

  6. css3的transform变换scale和translate等影响jQuery的position().top和offset().top

    css3的transform变换scale和translate等影响jQuery的position().top和offset().top

  7. CSS3 2D Transform

    在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和 ...

  8. CSS3 3D Transform

    CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...

  9. css3 过渡和2d变换——回顾

    1.transition 语法:transition: property duration timing-function delay; transition-property 设置过渡效果的css ...

随机推荐

  1. 浅谈Spring的两种配置容器

    浅谈Spring的两种配置容器 原文:https://www.jb51.net/article/126295.htm 更新时间:2017年10月20日 08:44:41   作者:黄小鱼ZZZ     ...

  2. CF1137F Matches Are Not a Child's Play(树链剖分)

    题面 我们定义一棵树的删除序列为:每一次将树中编号最小的叶子删掉,将该节点编号加入到当前序列的最末端,最后只剩下一个节点时将该节点的编号加入到结尾. 例如对于上图中的树,它的删除序列为:2 4 3 1 ...

  3. 洛谷P2762 太空飞行计划问题(最小割)

    传送门 我们可以把实验放在左边,仪器放在右边,点有点权,然后连对应的有向边,就是求一个最大权闭合图,可以转化为最小割来做(关于这具体是个啥……可以百度胡伯涛<最小割模型在信息学竞赛中的应用> ...

  4. 洛谷 P2096 最佳旅游线路

    某旅游区的街道成网格状.其中东西向的街道都是旅游街,南北向的街道都是林阴道.由于游客众多,旅游街被规定为单行道,游客在旅游街上只能从西向东走,在林阴道上则既可从南向北走,也可以从北向南走. 阿龙想到这 ...

  5. Leetcode 8. String to Integer (atoi) atoi函数实现 (字符串)

    Leetcode 8. String to Integer (atoi) atoi函数实现 (字符串) 题目描述 实现atoi函数,将一个字符串转化为数字 测试样例 Input: "42&q ...

  6. SDUT OJ 数据结构实验之二叉树一:树的同构

    数据结构实验之二叉树一:树的同构 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descri ...

  7. HTTP原理 请求方法

    HTTP的工作过程 一次HTTP操作称为一个事务,其工作过程分为四步: 1.客户机与服务器建立连接:客户单击某个超级链接,HTTP的工作开始,接下来进行TCP连接的三次握手过程. 2.建立连接后,客户 ...

  8. Qt 学习之路 2(32):贪吃蛇游戏(2)

    Qt 学习之路 2(32):贪吃蛇游戏(2) 豆子 2012年12月27日 Qt 学习之路 2 55条评论 下面我们继续上一章的内容.在上一章中,我们已经完成了地图的设计,当然是相当简单的.在我们的游 ...

  9. 本地localhost:端口号(自己设置的Apache的端口号)打不开问题解决了!开心、哭泣

    想不来自己有多蠢!历经4个月再没学,刚开始xampp的端口问题解决不了,系统竟然会自动改回去端口数据(哭晕) 后来一直显示Apache端口80占用,各种百度之后发现单纯浏览器都访问不了localhos ...

  10. 在 Domoticz 中添加插座开关

    前言 继上一篇的折腾,将 WiFi 插座刷为 ESPEasy,这次介绍一下在 Domoticz 中启用该插座的方法 步骤 在 Domoticz 控制台,设置 → 硬件中添加 Dummy,名称为&quo ...