首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3中Transform动画属性用法详解

Posted in HTML / CSS onJuly 04, 2016

css3在原来的基础上增加了变形和动画相关的属性，动画三兄弟：transform、transition和animation，通过使用这三个属性可以达到很炫酷的效果。需要注意的是这三个属性都是css3新增的属性，各大浏览器支持方面还不是特别好，使用时要特别注意浏览器的兼容性，本文重点介绍Transform的使用方法，具体内容如下

浏览器支持情况：

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。

Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

Opera 只支持 2D 转换。

2D transform变换方法

CSS3中Transform动画属性用法详解

•translate(x, y)方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。x, y的值可以取正负，分别表示表示向不同的方向偏移。
 •rotate(angle)方法， 表示旋转angle角度。angle为正时，按顺时针角度旋转，为负值时，元素逆时针旋转。
 •scale(x, y)方法，表示元素在x轴和y轴上的缩放比例，参数大于1时，元素放大，小于1时，元素缩小。
 •skew(x-angle,y-angle)方法，用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg
 •matrix(n,n,n,n,n,n)方法， 以一个含六值的变换矩阵的形式指定一个2D变换，此属性值使用涉及到数学中的矩阵，感兴趣的读者可以深入了解一下，这里就不做详细介绍了。
 
下面是上面方法的演示：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>transform 2D演示</title>  
  6.     <style type="text/css">  
  7.         #container{   
  8.             width: 700px;    
  9.             height: 120px;    
  10.             border: 1px solid blue;    
  11.             margin: 20px auto;    
  12.             padding: 20px 20px;   
  13.         }   
  14.         #div1 ,#div2, #div3, #div4{   
  15.             height: 100px;    
  16.             width: 100px;    
  17.             border: 1px dashed red;   
  18.             display: inline-block;   
  19.         }   
  20.         #div1 div{   
  21.             height: 100px;   
  22.             width: 100px;    
  23.             background: #63F7ED;    
  24.             transform:translate(20px,10px);         /* W3C标准 */   
  25.             -ms-transform:translate(20px,10px);     /* IE 9 */   
  26.             -moz-transform:translate(20px,10px);    /* Firefox */   
  27.             -webkit-transform:translate(20px,10px); /* Safari 和 Chrome */   
  28.             -o-transform:translate(20px,10px);      /* Opera */   
  29.         }   
  30.         #div2{margin-left: 50px;}   
  31.         #div2 div{   
  32.             height: 100px;   
  33.             width: 100px;    
  34.             background: #63F7ED;   
  35.             transform:rotate(45deg);        /* W3C标准 */   
  36.             -ms-transform:rotate(45deg);    /* IE 9 */   
  37.             -moz-transform:rotate(45deg);   /* Firefox */   
  38.             -webkit-transform:rotate(45deg); /* Safari 和 Chrome */   
  39.             -o-transform:rotate(45deg);         /* Opera */   
  40.         }   
  41.         #div3{margin-left: 100px;}   
  42.         #div3 div{   
  43.             height: 100px;   
  44.             width: 100px;    
  45.             background: #63F7ED;   
  46.             transform:scale(2,0.5);         /* W3C标准 */   
  47.             -ms-transform:scale(2,0.5);     /* IE 9 */   
  48.             -moz-transform:scale(2,0.5);    /* Firefox */   
  49.             -webkit-transform:scale(2,0.5); /* Safari 和 Chrome */   
  50.             -o-transform:scale(2,0.5);      /* Opera */   
  51.         }   
  52.         #div4{margin-left: 100px;}   
  53.         #div4 div{   
  54.             height: 100px;   
  55.             width: 100px;    
  56.             background: #63F7ED;   
  57.             transform:skew(30deg,-20deg);       /* W3C标准 */   
  58.             -ms-transform:skew(30deg,-20deg);   /* IE 9 */   
  59.             -moz-transform:skew(30deg,-20deg);  /* Firefox */   
  60.             -webkit-transform:skew(30deg,-20deg); /* Safari 和 Chrome */   
  61.             -o-transform:skew(30deg,-20deg);        /* Opera */   
  62.         }   
  63.   
  64.     </style>  
  65. </head>  
  66. <body>  
  67. <div id="container">  
  68.     <div id="div1">  
  69.         <div>translate</div>  
  70.     </div>  
  71.     <div id="div2">  
  72.         <div>rotate</div>  
  73.     </div>  
  74.     <div id="div3">  
  75.         <div>scale</div>  
  76.     </div>  
  77.     <div id="div4">  
  78.         <div>skew</div>  
  79.     </div>  
  80. </div>     
  81. </body>  
  82. </html>  
  83.   

效果如下：

CSS3中Transform动画属性用法详解

transform-origin 属性

前面我们提到的transform的方法都是基于元素的中心来变换的，也就是元素变换的基点默认是元素的中心。但是有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变。该属性可以接收三个参数：

transform-origin: x-axis y-axis z-axis;
 •x-axis，表示水平方向上的取值，可以取 字符参数值left,center right，也可以取百分比，字符参数值对应的百分值为left=0%;center=50%;right=100%。
 •y-axis，表示竖直方向上的取值，还可以设置字符值top,center,bottom，也可以取百分比，字符参数值对应的百分值为top=0%;center=50%;bottom=100%。
 •z-axis，表示视图被置于 Z 轴的何处，用于3D变形中。
 
我们可以设置基点来与之前的transform图形进行对比：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>transform-origin演示</title>  
  6.     <style type="text/css">  
  7.         *{   
  8.             margin: 0;   
  9.             padding: 0;   
  10.         }   
  11.         #container{   
  12.             width: 800px;    
  13.             height: 150px;    
  14.             border: 1px solid blue;    
  15.             margin: 20px auto;    
  16.             padding: 20px 20px;   
  17.         }   
  18.         #div1 ,#div2, #div3, #div4{   
  19.             height: 100px;    
  20.             width: 100px;    
  21.             border: 1px dashed red;   
  22.             display: inline-block;   
  23.         }   
  24.         #div1 div{   
  25.             height: 100px;   
  26.             width: 100px;    
  27.             background: #63F7ED;    
  28.             transform:translate(20px,10px);         /* W3C标准 */   
  29.             -ms-transform:translate(20px,10px);     /* IE 9 */   
  30.             -moz-transform:translate(20px,10px);    /* Firefox */   
  31.             -webkit-transform:translate(20px,10px); /* Safari 和 Chrome */   
  32.             -o-transform:translate(20px,10px);      /* Opera */   
  33.             transform-origin:left top;          /* W3C标准 */   
  34.             -ms-transform-origin:left top;  /* IE 9 */   
  35.             -moz-transform-origin:left top; /* Firefox */   
  36.             -webkit-transform-origin:left top; /* Safari 和 Chrome */   
  37.             -o-transform-origin:left top;       /* Opera */   
  38.         }   
  39.         #div2{margin-left: 100px;}   
  40.         #div2 div{   
  41.             height: 100px;   
  42.             width: 100px;    
  43.             background: #63F7ED;   
  44.             transform:rotate(45deg);        /* W3C标准 */   
  45.             -ms-transform:rotate(45deg);    /* IE 9 */   
  46.             -moz-transform:rotate(45deg);   /* Firefox */   
  47.             -webkit-transform:rotate(45deg); /* Safari 和 Chrome */   
  48.             -o-transform:rotate(45deg);         /* Opera */   
  49.             transform-origin:0% 0%;         /* W3C标准 */   
  50.             -ms-transform-origin:0% 0%;     /* IE 9 */   
  51.             -moz-transform-origin:0% 0%;    /* Firefox */   
  52.             -webkit-transform-origin:0% 0%;  /*Safari 和 Chrome */   
  53.             -o-transform-origin:0% 0%;      /* Opera */   
  54.         }   
  55.         #div3{margin-left: 50px;}   
  56.         #div3 div{   
  57.             height: 100px;   
  58.             width: 100px;    
  59.             background: #63F7ED;   
  60.             transform:scale(2,0.5);         /* W3C标准 */   
  61.             -ms-transform:scale(2,0.5);     /* IE 9 */   
  62.             -moz-transform:scale(2,0.5);    /* Firefox */   
  63.             -webkit-transform:scale(2,0.5); /* Safari 和 Chrome */   
  64.             -o-transform:scale(2,0.5);      /* Opera */   
  65.             transform-origin:center top;        /* W3C标准 */   
  66.             -ms-transform-origin:center top;    /* IE 9 */   
  67.             -moz-transform-origin:center top;   /* Firefox */   
  68.             -webkit-transform-origin:center top; /* Safari 和 Chrome */   
  69.             -o-transform-origin:center top;        
  70.         }   
  71.         #div4{margin-left: 150px;}   
  72.         #div4 div{   
  73.             height: 100px;   
  74.             width: 100px;    
  75.             background: #63F7ED;   
  76.             transform:skew(30deg,-20deg);       /* W3C标准 */   
  77.             -ms-transform:skew(30deg,-20deg);   /* IE 9 */   
  78.             -moz-transform:skew(30deg,-20deg);  /* Firefox */   
  79.             -webkit-transform:skew(30deg,-20deg); /* Safari 和 Chrome */   
  80.             -o-transform:skew(30deg,-20deg);        /* Opera */   
  81.             transform-origin:100% 100%;         /* W3C标准 */   
  82.             -ms-transform-origin:100% 100%;     /* IE 9 */   
  83.             -moz-transform-origin:100% 100%;    /* Firefox */   
  84.             -webkit-transform-origin:100% 100%; /* Safari 和 Chrome */   
  85.             -o-transform-origin:100% 100%;    
  86.         }   
  87.   
  88.     </style>  
  89. </head>  
  90. <body>  
  91. <div id="container">  
  92.     <div id="div1">  
  93.         <div>translate(基点为(left top)</div>  
  94.     </div>  
  95.     <div id="div2">  
  96.         <div>rotate(基点为(0%, 0%)</div>  
  97.     </div>  
  98.     <div id="div3">  
  99.         <div>scale(基点为(center, top)</div>  
  100.     </div>  
  101.     <div id="div4">  
  102.         <div>skew(基点为(100%, 100%)</div>  
  103.     </div>  
  104. </div>     
  105. </body>  
  106. </html>  
  107.   

效果如下：

CSS3中Transform动画属性用法详解

对比发现：translate()方法与之前的没有区别，其他三个方法基点改变了，图形变形效果也有所变化。

3D transform变换方法

Internet Explorer 10 和 Firefox 支持 3D 转换.
Chrome 和 Safari 必须添加前缀 -webkit-.
Opera 还不支持 3D 转换(支持 2D 转换 ).

三维变换使用基于二维变换的相同属性。CSS3中的3D变换主要包括以下几种功能函数：
 •3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；
 •3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；
 •3D缩放：CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；
 •3D矩阵：CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。
 
还有以下几个转换属性：
 •transform-style： 规定被嵌套元素如何在 3D 空间中显示。
 •perspective： 规定 3D 元素的透视效果。
 •perspective-origin： 规定 3D 元素的底部位置。
 •backface-visibility： 定义元素在不面对屏幕时是否可见。
 
目前各大主流浏览器对transform 3d属性的兼容性还不是特别好，感兴趣的读者可以自行深入了解。下面我们介绍几个常用的功能方法：

rotateX()方法，围绕其在一个给定度数X轴旋转的元素；
rotateY()方法，围绕其在一个给定度数Y轴旋转的元素；
rotateZ()方法，围绕其在一个给定度数Z轴旋转的元素。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="en">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>transform 3d </title>   
  6.     <style type="text/css">   
  7.         *{   
  8.             margin: 0;   
  9.             padding: 0;   
  10.         }  
  11.         #container{   
  12.             width: 440px;    
  13.             height: 120px;    
  14.             border: 1px solid blue;    
  15.             margin: 20px auto;    
  16.             padding: 20px 20px;   
  17.         }  
  18.         #div1 ,#div2, #div3, #div4{   
  19.             height: 100px;    
  20.             width: 100px;    
  21.             border: 1px dashed red;   
  22.             display: inline-block;   
  23.         }  
  24.         #div1 div{   
  25.             height: 100px;   
  26.             width: 100px;    
  27.             background: #63F7ED;    
  28.             transform:rotateX(45deg);       /* W3C标准 */  
  29.             -webkit-transform:rotateX(45deg)); /* Safari 和 Chrome */  
  30.         }  
  31.         #div2{margin-left: 50px;}  
  32.         #div2 div{   
  33.             height: 100px;   
  34.             width: 100px;    
  35.             background: #63F7ED;    
  36.             transform:rotateY(45deg);       /* W3C标准 */  
  37.             -webkit-transform:rotateY(45deg)); /* Safari 和 Chrome */  
  38.         }  
  39.         #div3{margin-left: 50px;}  
  40.         #div3 div{   
  41.             height: 100px;   
  42.             width: 100px;    
  43.             background: #63F7ED;    
  44.             transform:rotateZ(45deg);       /* W3C标准 */  
  45.             -webkit-transform:rotateZ(45deg)); /* Safari 和 Chrome */  
  46.         }   
  47.   
  48.     </style>   
  49. </head>   
  50. <body>   
  51.     <div id="container">   
  52.         <div id="div1">   
  53.             <div>rotateX(45deg)</div>   
  54.         </div>   
  55.         <div id="div2">   
  56.             <div>rotateY(45deg)</div>   
  57.         </div>   
  58.         <div id="div3">   
  59.             <div>rotateZ(45deg)</div>   
  60.         </div>   
  61.     </div>     
  62. </body>   
  63. </html>   
  64.   

下面是显示效果：

CSS3中Transform动画属性用法详解

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

CSS3中Transform动画属性用法详解

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
css3与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 HTML / CSS
CSS3打造磨砂玻璃背景效果
Sep 28 HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
CSS3 渐变（Gradients）之CSS3 线性渐变
Jul 08 #HTML / CSS
CSS3 渐变（Gradients）之CSS3 径向渐变
Jul 08 #HTML / CSS
CSS3弹性伸缩布局之box布局
Jul 12 #HTML / CSS
使用CSS3代码绘制可爱的Hello Kitty猫
Aug 03 #HTML / CSS
使用css3绘制出各种几何图形
Aug 17 #HTML / CSS
利用CSS3实现自定义滚动条代码分享
Aug 18 #HTML / CSS
纯CSS3实现图片无间断轮播效果
Aug 25 #HTML / CSS
逆序(1) 进程假死(1) 连接数(1) yolo3(1) 线程(1) jenkins(1) 访问日志(2) UV(1) PV(1) 字符串(2)
You might like
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
详解在React项目中安装并使用Less（用法总结）
2019/03/18 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
[00:33]2016完美“圣”典风云人物：BurNIng宣传片
2016/12/10 DOTA
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
Python实现截屏的函数
2015/07/25 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
基于腾讯云服务器部署微信小程序后台服务（Python+Django）
2019/05/08 Python
python按比例随机切分数据的实现
2019/07/11 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
如何定义TensorFlow输入节点
2020/01/23 Python
python如何实现复制目录到指定目录
2020/02/13 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
python Matplotlib数据可视化（1）：简单入门
2020/09/30 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
英国花园、DIY、电器和家居用品商店：Robert Dyas
2019/03/18 全球购物
个性化皮包、小袋、生活配件：Mon Purse
2019/03/26 全球购物
《听鱼说话》教学反思
2014/02/15 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
车间安全生产管理制度
2015/08/06 职场文书
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js