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 相关文章推荐
使用CSS实现阅读进度条
Feb 27 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 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 缩略图实现函数代码
2011/06/23 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
python截取两个单词之间的内容方法
2018/12/25 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
a标签下载链接的简单实现
2016/09/13 HTML / CSS
自动化系在校本科生求职信
2013/10/23 职场文书
和睦家庭事迹
2014/05/14 职场文书
篮球比赛策划方案
2014/06/05 职场文书
企业安全标语
2014/06/07 职场文书
工作检讨书大全
2015/01/26 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
财务人员入职担保书
2015/09/22 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书