CSS3 Tranform详解

转自： http://hi.baidu.com/vital_hh/blog/item/497d59f09eb68849352acca8.html

CSS3 Tranform的作用就是实现一些变换效果，包括旋转、倾斜、缩放、位移效果。

CSS3的这个属性目前只是针对于Webkit（Google Chrome，Safari）、Moz（Firefox）以及Opera浏览器，很遗憾IE还不支持

下面以-webkit-为前缀的表示支持webkit浏览器，以-moz-为前缀的表示支持moz浏览器，以-o-为前缀的表示支持opera浏览器

（1）rotate 旋转效果

语法：-webkit-transform:rotate(30deg);

-moz-transform:rotate(30deg);

-o-tranfsorm:rotate(30deg);

参数：括号里的参数表示的是旋转的角度，“deg”即“degree”的缩写，也就是角度的单位

（2）skew 倾斜效果

语法：-webkit-transform:skew(30deg);

-moz-transform:skew(30deg);

-o-transform:translate(120px,50px);

参数：参数同rotate

（3）scale 缩放效果

scale(0.6)效果 scale(-0.6)效果

语法：-webkit-transform:scale(0.8);

-moz-transform:scale(0.8);

-o-transform:scale(0.8);

参数：如果参数小于1则表示缩小，大于1则表示放大

如果参数为负数且绝对值小于1则反转后缩小，否则反转后放大

（4）translate 位移效果

语法： -webkit-transform:translate(120px,100px);

-moz-transform:translate(120px,100px)

-o-transform:translate(120px,100px)

参数：第一个参数表示的是水平方向上的偏移量

第二个参数表示的是竖直方向上的偏移量

完整案例：

<html>
<head>
     <title>CSS3 transform测试</title>
     <style>
        .rt,.sk,.sc,.ts{width:250px;height:200px;float:left;margin:50px 30px;color:#fff;font-size:25px;font-weight:bold;

line-height:200px;text-align:center;}
        .rt{background:red;-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-o-transform:rotate(30deg);}
        .sk{background:green;-webkit-transform:skew(-30deg);-moz-transform:skew(-30deg);-o-transform:skew(-30deg);}
        .sc{background:pink;-webkit-transform:scale(-0.6);-moz-transform:scale(-0.6);-o-transform:scale(-0.6);}
        .ts{background:blue;-webkit-transform:translate(50px,50px);-moz-transform:translate(120px,50px); -o-transform:translate(120px,50px)}
      </style>
</head>
<body>
    <div class="rt">rotate旋转效果</div>
    <div class="sk">skew偏移效果</div>
    <div class="sc">scale缩放效果</div>
    <div class="ts">translate位移效果</div>
</body>
</html>

效果如下：

CSS3 Tranform详解相关推荐

CSS3 animation-fill-mode详解
CSS3 animation-fill-mode详解定义 animation-fill-mode 属性规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式. 默认情 ...
CSS3动画详解（图文教程）
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言本文主要内容: 过渡:transition 2D 转换 trans ...
CSS3 Filter详解（改变模糊度亮度透明度等方法）
文章目录 1.模糊 2.灰度 3.亮度 4.对比度 5.饱和度 6.色相旋转 7.反色 8.阴影 9.透明度 10.褐色 CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 ...
css3 object-fit详解
上传头像的时候遇到了头像变形的问题,最后通过object-fit: cover完美解决了.这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能. object-fit理解 CSS3 backgro ...
CSS3属性详解：动画详解
前言本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation 过渡:transition transition的中文含义是 ...
基础：CSS3选择器详解
CSS选择器标签选择器作用:根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性. <style>/* 标签选择器 */div {color: aqua;font-s ...
CSS3渐变色详解：几种颜色之间的平稳过渡
渐变区域一直是装饰前端页面的重要饰品,在CSS3的渐变色属性出来之前这一效果只能借助设计师的图片来进行装饰,这样会平白给页面增加了一些http请求次数并增大了页面体积,最终导致延长页面的加载时间.而渐 ...
CSS3圆角详解第一辑
有很多人都知道圆角怎么写,加一个border-radius就可以,但是对于用圆角的一些细节却并不是很清楚,那么我们今天就来聊一聊这个圆角. CSS3是样式表(style sheet)语言的最新版本,它 ...
css3动画详解 ——复习（笔记）
本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation 过渡:transition transition的中文含义是过渡. ...

CSS3 Tranform详解

CSS3 Tranform详解相关推荐

最新文章

热门文章