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. 下载Chrome浏览器离线安装包

    下面提供了window和Mac OS两个版本的Chrome离线版本: Windows版本 Mac OS版本 说明 基本格式是在 chrome 首页的链接 https://www.google.com/ ...

  2. android android studio

     android studio 一.安装及步骤: Android Studio安装: java jdk安装: jdk环境变量配置: 二.遇到的问题: 1.缺少jvm或java jdk路径不对,请指定正 ...

  3. Delphi XE8如何同Eclipse使用相同的Android SDK?

    我的Android SDK是单独安装的:Eclipse也是最新版的,并不是谷歌提供的集成了SDK的那个Eclipse:Delphi XE8安装后,我并没有通过XE8里面下载Android SDK到XE ...

  4. sqlite数据库文件查看

  5. 「BZOJ 1924」「SDOI 2010」所驼门王的宝藏「Tarjan」

    题意 一个\(r\times c\)的棋盘,棋盘上有\(n\)个标记点,每个点有三种类型,类型\(1\)可以传送到本行任意标记点,类型\(2\)可以传送到本列任意标记点,类型\(3\)可以传送到周围八 ...

  6. List_insert

    List_insert /* Sorting from little to large use List */ #include <stdio.h> /* printf, scanf, N ...

  7. Java程序员修炼之路

    作者简介:王成委,CSDN知识库特邀编辑,Java高级工程师,熟悉Java编程语言和Oracle数据库.专注于高并发架构设计和大数据存储方向的研究. 我们为什么选择Java 大多数人选择Java可能只 ...

  8. vim使用及vimrc配置

    参考文章 https://segmentfault.com/a/1190000011466454 如有侵权,请联系本人删除!

  9. java基础_01

    一.java中的数据类型 1.基本数据类型:四类八种 byte(1),boolean(1),short(2),char(2),int(4),float(4),long(8),double(8); 2. ...

  10. 利用CountDownLatch和Semaphore测试案例

    package com.cxy; import java.util.HashMap; import java.util.Map; import java.util.concurrent.CountDo ...