首页
所有分类
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 mask遮罩实现一些特效
Oct 24 HTML / CSS
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比（史上最全版）
Aug 18 HTML / CSS
HTML5 对各个标签的定义与规定：body的介绍
Jun 21 HTML / CSS
HTML块级标签汇总（小篇）
Jul 13 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 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
短波(8) KDKA(1) 长波(3) 广播(8) Harman Kardon(1) 电台频率(32) 中波(3) 收音机(62) 保养(1) 立体声(1)
You might like
咖啡的化学
2021/03/03 咖啡文化
php获取地址栏信息的代码
2008/10/08 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
javascript算法学习(直接插入排序)
2011/04/12 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
深入理解js中this的用法
2016/05/28 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
python统计文本文件内单词数量的方法
2015/05/30 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
入党申请人的自我鉴定
2013/12/01 职场文书
小学英语教学反思案例
2014/02/04 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
二年级评语大全
2014/04/23 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
董事长岗位职责
2015/02/13 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书