CSS3 transform是什么?

transform的含义是:改变,使…变形;转换

CSS3 transform都有哪些常用属性?

transform的属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。

下面我们来分解各个属性的用法:

transform:rotate():

含义:旋转;其中“deg”是“度”的意思,如“10deg”表示“10度”下同。

点此查看实例展示

.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}

transform:skew():

含义:倾斜;

点此查看实例展示

.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

transform:scale():

含义:比例;“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,缩小则为负“-”。

点此查看实例展示

.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}

transform:translate():

含义:变动,位移;如下表示向右位移120像素,如果向上位移,把后面的“0”改个值就行,向左向下位移则为负“-”。

点此查看实例展示

.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}

transform综合:

transform的常用属性就是这些了,下面我们借助transition的帮忙来演示一个关于css3 transform的综合实例:

点此查看实例展示

.demo_transform5{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}
.demo_transform5:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0)}

CSS3详解:transform的更多相关文章

  1. CSS3详解:transform、transition

    CSS3 transform是什么? transform的含义是:改变,使-变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() ...

  2. CSS3详解:background

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  3. 02_HTML5+CSS3详解第五、六天(实战篇之HTML5制作企业网站)

    [废话连篇 - 实战篇,没什么好说的,最后一章兼容性问题懒得看了,over] Details 一.Xmind部分 xmind教程:http://www.jianshu.com/p/7c488d5e4b ...

  4. CSS3详解:border color

    继续我们的 ,大家觉得怎么样呢?

  5. 【CSS3 transform属性和过渡属性详解】

    CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...

  6. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  7. CSS3 transform 属性详解(skew, rotate, translate, scale)

    写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...

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

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

  9. css3系列之transform详解translate

    translate translate这个参数的,是transform 身上的,那么它有什么用呢? 其实他的作用很简单,就是平移,参考自己的位置来平移 translate() translateX() ...

随机推荐

  1. IT公司100题-3-求数组的最大子序列的和

    问题描述: 输入一个整形数组,数组里有正数也有负数. 数组中连续的一个或多个整数组成一个子数组,每个子数组都有一个和. 求所有子数组的和的最大值.要求时间复杂度为O(n). 例如输入的数组为1, -2 ...

  2. Rhel6-tomcat+nginx+memcached配置文档

    理论基础: User - > web ->nginx  ->tomcat1 ->*.jsp 80          8080 ↓      -> tomcat2 html ...

  3. navtab方法参数以及事件

    参数(options) DOM方式初始化navtab的,推荐使用集合属性data-options定义参数,如果使用data属性定义参数,注意转换成对应的名称. 名称 类型 默认值 描述 id stri ...

  4. git——学习笔记(三)分支管理

    一.创建.合并分支 每次提交,git都往后走一格,串成一跳时间线,head指向的是分支,分支指向提交.master是主分支,dev是另一条分支,分支就像指针一样,合并.删除分支时,修改的都是指针,工作 ...

  5. php大力力 [012节]PHP连接mySQL数据库

    php大力力 [012节]PHP连接mySQL数据库 1.用简单的php测试代码,而不是直接进入前端页面,越简单越好 2.在=号前后,不要写空格,万一写了中文空格,排除错误很麻烦. 3.我在mysql ...

  6. Java custom annotations

    Custom annotation definition is similar as Interface, just with @ in front. Annotation interface its ...

  7. linux命令:rmdir

    1.命令介绍: rmdir只能用来删除空目录,删除某目录时必须对其父目录有读权限. 2.命令选项: rmdir [选项] 目录 3.命令参数: -p --parent 递归删除目录dirname,当子 ...

  8. Cocos2d-x 2.x项目创建

    cocos2d-x下载地址:http://www.cocos2d-x.org/download 2.0之后的创建项目 1. cd cocos2d-x-2.2.1/tools/project-creat ...

  9. 设置dt height 保证dd在同一行

    <html>   <head>   <meta charset="UTF-8">   <meta name="Author&qu ...

  10. HDU 1721

    http://acm.hdu.edu.cn/showproblem.php?pid=1721 非常有趣的一道水题,注意到相隔一个点的粒子数是可以相互转移的,所以只要判红点的和与蓝点的和是否相等 #in ...