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. Promise超时重新请求

    export default function (promiseProducer, params, interval, attemptTimes) { interval = typeof interv ...

  2. java并发编程(更新)

    概念理解:①串行程序②并发程序: 线程安全问题: 同一进程中的所有线程共享进程中的内存地址空间.如果没有明确的同步机制来管理共享数据,那么当一个线程正在使用某个变量时,另一个线程可能同时访问这个变量, ...

  3. Java代码生成16位纯数字的订单号

    //生成16位唯一性的订单号 public static void getUUID(){ //随机生成一位整数 int random = (int) (Math.random()*9+1); Stri ...

  4. docker概述及基础操作

    docker概述 容器技术已经成为应用程序封装和交付的核心技术容器技术的核心有以下几个内核组成CGroups-资源管理NamsSpace-进程管理SElinux-安全 由于是在物理机上实施隔离,启动一 ...

  5. jmete察看结果树和body data乱码问题的解决办法

    jmeter察看结果树乱码问题的解决办法: (1)在jmeter的bin目录下找到jmeter.properties这个文件添加sampleresult.default.encoding=utf-8 ...

  6. loj #6046. 「雅礼集训 2017 Day8」爷

    #6046. 「雅礼集训 2017 Day8」爷 题目描述 如果你对山口丁和 G&P 没有兴趣,可以无视题目背景,因为你估计看不懂 …… 在第 63 回战车道全国高中生大赛中,军神西住美穗带领 ...

  7. nginx负载均衡fair模块安装和配置

    nginx-upstream-fair-master fair模块源码 官方github下载地址:https://github.com/gnosek/nginx-upstream-fair说明:如果从 ...

  8. iis 重启命令

    打开IIS配置窗口的CMD命令:开始---运行---CMD----输入inetmgr  直接使用CMD我们可以操作很多事情,比如启动IIS,重启IIS,停止IIS 重启IIS服务器,开始->运行 ...

  9. 关于运行robot framework 报错解决方法,ModuleNotFoundError: No module named 'robot'

    报错: command: pybot.bat --argumentfile c:\users\76776\appdata\local\temp\RIDEiw0utf.d\argfile.txt --l ...

  10. rpm命令-以jenkins为例

    1.列出所有安装的Jenkins rpm -qa | grep jenkins 2.软件是否安装:例如:jenkins是否安装 rpm -qa | grep jenkins 3.rpm -ql 列出软 ...