CSS3详解:transform
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的更多相关文章
- CSS3详解:transform、transition
CSS3 transform是什么? transform的含义是:改变,使-变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() ...
- CSS3详解:background
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
- 02_HTML5+CSS3详解第五、六天(实战篇之HTML5制作企业网站)
[废话连篇 - 实战篇,没什么好说的,最后一章兼容性问题懒得看了,over] Details 一.Xmind部分 xmind教程:http://www.jianshu.com/p/7c488d5e4b ...
- CSS3详解:border color
继续我们的 ,大家觉得怎么样呢?
- 【CSS3 transform属性和过渡属性详解】
CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
- CSS3 transform 属性详解(skew, rotate, translate, scale)
写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...
- 第98天:CSS3中transform变换详解
transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...
- css3系列之transform详解translate
translate translate这个参数的,是transform 身上的,那么它有什么用呢? 其实他的作用很简单,就是平移,参考自己的位置来平移 translate() translateX() ...
随机推荐
- IT公司100题-3-求数组的最大子序列的和
问题描述: 输入一个整形数组,数组里有正数也有负数. 数组中连续的一个或多个整数组成一个子数组,每个子数组都有一个和. 求所有子数组的和的最大值.要求时间复杂度为O(n). 例如输入的数组为1, -2 ...
- Rhel6-tomcat+nginx+memcached配置文档
理论基础: User - > web ->nginx ->tomcat1 ->*.jsp 80 8080 ↓ -> tomcat2 html ...
- navtab方法参数以及事件
参数(options) DOM方式初始化navtab的,推荐使用集合属性data-options定义参数,如果使用data属性定义参数,注意转换成对应的名称. 名称 类型 默认值 描述 id stri ...
- git——学习笔记(三)分支管理
一.创建.合并分支 每次提交,git都往后走一格,串成一跳时间线,head指向的是分支,分支指向提交.master是主分支,dev是另一条分支,分支就像指针一样,合并.删除分支时,修改的都是指针,工作 ...
- php大力力 [012节]PHP连接mySQL数据库
php大力力 [012节]PHP连接mySQL数据库 1.用简单的php测试代码,而不是直接进入前端页面,越简单越好 2.在=号前后,不要写空格,万一写了中文空格,排除错误很麻烦. 3.我在mysql ...
- Java custom annotations
Custom annotation definition is similar as Interface, just with @ in front. Annotation interface its ...
- linux命令:rmdir
1.命令介绍: rmdir只能用来删除空目录,删除某目录时必须对其父目录有读权限. 2.命令选项: rmdir [选项] 目录 3.命令参数: -p --parent 递归删除目录dirname,当子 ...
- Cocos2d-x 2.x项目创建
cocos2d-x下载地址:http://www.cocos2d-x.org/download 2.0之后的创建项目 1. cd cocos2d-x-2.2.1/tools/project-creat ...
- 设置dt height 保证dd在同一行
<html> <head> <meta charset="UTF-8"> <meta name="Author&qu ...
- HDU 1721
http://acm.hdu.edu.cn/showproblem.php?pid=1721 非常有趣的一道水题,注意到相隔一个点的粒子数是可以相互转移的,所以只要判红点的和与蓝点的和是否相等 #in ...