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 相关文章推荐
CSS3的 fit-content实现水平居中
Sep 07 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
Sep 25 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 HTML / CSS
不要在HTML中滥用div
May 08 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
Protoss建筑一览
2020/03/14 星际争霸
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
优化PHP程序的方法小结
2012/02/23 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
Python中文件遍历的两种方法
2014/06/16 Python
Python多线程扫描端口代码示例
2018/02/09 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
python实现高斯投影正反算方式
2020/01/17 Python
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
2014年体育工作总结
2014/11/24 职场文书
理解python中装饰器的作用
2021/07/21 Python
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL