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. 生成MySql数据库的数据字典代码参考

    Code: /** * 生成mysql数据字典 */ //配置数据库 $dbserver = "127.0.0.1"; $dbusername = "root" ...

  2. c++实现多叉树树形显示(适合家谱的显示)

    多叉树(左兄弟右孩子二叉树)的树形显示 核心代码 void positionadd(Multiway_tree*root, int n) { if (!root)return; Multiway_tr ...

  3. ubuntu14.10,安装ksnapshot(截图软件)

    Linux:ubuntu14.10 ubuntu软件中心对它的描述:KSnapshot captures images of the screen.  It can capture the whole ...

  4. NSSize 尺寸

    前言 结构体,这个结构体用来表示事物的宽度和高度. typedef CGSize NSSize; struct CGSize { CGFloat width; CGFloat height; }; t ...

  5. 20165219 2017-2018-2 《Java程序设计》第7周学习总结

    20165219 2017-2018-2 <Java程序设计>第7周学习总结 课本知识总结 第11章 JDBC与MySQL数据库 连接数据库 1下载JDBC-MySQL数据库驱动 2 加载 ...

  6. 基于CAS的单点登录实战(2)-- 搭建cas的php客户端

    在这之前已经搭好了CAS服务端 基于CAS的单点登录实战(1)-- 搭建cas服务器 PHP-Client php-Client是官方支持的,去官网下个最新版就好了.phpCAS 接入很简单,解压放到 ...

  7. 墨菲定律与 IndexOutOfBoundsException(数组越界异常)

    今天维护又反馈了一问题过来,查询试卷时报数组越界异常: 2017-02-28 10:45:24,827[ERROR] HttpException[10.32.111.7:60446:2D07867BE ...

  8. 用HTML,css完成的百叶窗效果,新手必看

    <!DOCTYPE html><html> <head>  <meta charset="utf-8">  <title> ...

  9. 'javac' 不是内部或外部命令,也不是可运行的程序

    win10 系统下'javac' 不是内部或外部命令,也不是可运行的程序 1.在系统变量下面配置 JAVA_HOME:你自己的jdk的路径 CLASSPATH= .;%JAVA_HOME%libdt. ...

  10. Codeforces Round #175 (Div. 2) A~D 题解

    A.Slightly Decreasing Permutations Permutation p is an ordered set of integers p1,  p2,  ...,  pn, c ...