首页
所有分类
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动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
css sprite简单实例
May 23 HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 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
ref(1) 游标(1) ECharts(3) 临时表(1) 表变量(1) ip连接(1) props(1) timestamp(1) mixin(1) GTID(1)
You might like
PHP 中的面向对象编程：通向大型 PHP 工程的办法
2006/12/03 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
学习vue.js计算属性
2016/12/03 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
videocapture库制作python视频高速传输程序
2013/12/23 Python
一个超级简单的python web程序
2014/09/11 Python
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
一些Python中的二维数组的操作方法
2015/05/02 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
python如何处理程序无法打开
2020/06/16 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
Moda Italia荷兰：意大利男士服装
2019/08/31 全球购物
解释一下Windows的消息机制
2014/01/30 面试题
经理秘书找工作求职信
2013/12/19 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
工作收入证明范本
2015/06/12 职场文书
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers
用JS写一个发布订阅模式
2021/11/07 Javascript