css3 transform属性详解


Posted in HTML / CSS onSeptember 30, 2014

CSS3变形是一些效果的集合,比如平移translate() 、旋转rotate()、缩放scare()和倾斜skew()效果,每个效果都被称作为变形函数(Transform Function),它们可以操控元素发生旋转、缩放、和平移等变化。

CSS3的2D transform函数包括了translate()、scale()、rotate()和skew()。

 translate()函数接受CSS的标准度量单位;scale()函数接受一个0和1之间的十进制值;rotate()和skew()两个函数都接受一个径向的度量单位值deg。除了rotate()函数之外,每个函数都接受X轴和Y轴的参数。
CSS3变形中具有X /Y可用的函数:translateX()、translateY()、scaleX()、scaleY()、skewX()和skewY()。(translateX(正的向右),translateY(负的向上))

 2D transform常用的transform-function的功能:

translate():用来移动元素,可以根据X轴和Y轴坐标重新定位元素位置。在此基础上有两个扩展函数:translateX()和translateY()。
scale():用来缩小或放大元素,可以使用元素尺寸发生变化。在此基础上有两个扩展函数:scaleX()和scaleY()。
rotate():用来旋转元素。
skew():用来让元素倾斜。在此基础上有两个扩展函数:skewX()和skewY()。
matrix():定义矩阵变形,基于X轴和Y轴坐标重新定位元素位置。

3D transform常用的transform-function的功能:

translate3d():移元素元素,用来指定一个3D变形移动位移量
translate():指定3D位移在Z轴的位移量。
scale3d():用来缩放一个元素。
scaleZ():指定Z轴的缩放向量。
rotate3d():指定元素具有一个三维旋转的角度。
rotateX()、rotateY()和rotateZ():让元素具有一个旋转角度。
perspective():指定一个透视投影矩阵。
matrix3d():定义矩阵变形。
设置transform-style的值为preserve-3d值,建立一个3D渲染环境。

transform-origin属性指定元素的中心点在哪。transform-origin属性值可以是百分比、em、px等具体的值,也可以是top、right、bottom、left和center这样的关键词。

    `perspective`属性: 设置元素被查看位置的视图。 perspective 属性定义 3D 元素距
视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

    `perspective-origin:` 设置 3D 元素的基点位置。 属性定义 3D 元素所基于的 X 轴
和 Y 轴。该属性允许您改变 3D 元素的底部位置。
Perspective:景深
perspective-origin :景深基点
transform-origin:变换基点

css3 transform属性详解

注意:和transform属性易混淆的是transition过渡属性(不是translate()移动变化哦)。

更加具体的变形你可以参照这个网站,可以实时显示样式和代码:http://ecd.tencent.com/css3/tools.html

看下面一个例子:

复制代码
代码如下:

<style type="text/css">
.animation{
transform:rotate(20deg) scaleX(1.7) scaleY(-0.7) translateX(132px)
translateY(21px) skewX(-26deg) skewY(5deg);
}
</style></p> <p> <body>
<div class="animation" style="height:100px;width:100px;
background:black;color:white">
Transform变化
</div></p> <p></body>
HTML / CSS 相关文章推荐
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 #HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 #HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 #HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 #HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 #HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 #HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 #HTML / CSS
You might like
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
javascript new fun的执行过程
2010/08/05 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
python生成圆形图片的方法
2020/03/25 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
python 不以科学计数法输出的方法
2018/07/16 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
简单了解python中的与或非运算
2019/09/18 Python
python 日志 logging模块详细解析
2020/03/31 Python
怎样有效的进行自我评价
2013/10/06 职场文书
应届毕业生的个人自我鉴定
2013/10/24 职场文书
考核工作实施方案
2014/03/30 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
浅谈Web Storage API的使用
2021/06/23 Javascript