您现在的位置： 365建站网 > 365文章 > CSS3旋转动画(360度旋转、旋转放大、放大、移动) 用法和实例

CSS3旋转动画(360度旋转、旋转放大、放大、移动) 用法和实例

文章来源：365jz.com     点击数：2272    更新时间：2018-11-03 20:50   参与评论

CSS3旋转动画(360度旋转、旋转放大、放大、移动) 用法和实例
Internet Explorer 10、Firefox、Opera 支持 transform 属性。

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

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

Opera 只支持 2D 转换。

定义和用法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

为了更好地理解 transform 属性，请查看这个演示。

默认值：none
继承性：no
版本：CSS3
JavaScript 语法：object.style.transform="rotate(7deg)"

语法

</>code
  1. transform: none|transform-functions;
值描述测试
none定义不进行转换。测试
matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)定义 2D 转换。测试
translate3d(x,y,z)定义 3D 转换。
translateX(x)定义转换，只是用 X 轴的值。测试
translateY(y)定义转换，只是用 Y 轴的值。测试
translateZ(z)定义 3D 转换，只是用 Z 轴的值。
scale(x,y)定义 2D 缩放转换。测试
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)通过设置 X 轴的值来定义缩放转换。测试
scaleY(y)通过设置 Y 轴的值来定义缩放转换。测试
scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)定义 2D 旋转，在参数中规定角度。测试
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿着 X 轴的 3D 旋转。测试
rotateY(angle)定义沿着 Y 轴的 3D 旋转。测试
rotateZ(angle)定义沿着 Z 轴的 3D 旋转。测试
skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。测试
skewX(angle)定义沿着 X 轴的 2D 倾斜转换。测试
skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。测试
perspective(n)为 3D 转换元素定义透视视图。测试
</>code
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">
  7.         div{
  8.             width:120px;
  9.             height:120px;
  10.             line-height:120px;
  11.             margin: 20px;
  12.             background-color: #5cb85c;
  13.             float: left;
  14.             font-size: 12px;
  15.             text-align: center;
  16.             color:orangered;
  17.         }
  18.         /*效果一：360°旋转 修改rotate(旋转度数)*/
  19.         .img1 {
  20.             transition: All 0.4s ease-in-out;
  21.             -webkit-transition: All 0.4s ease-in-out;
  22.             -moz-transition: All 0.4s ease-in-out;
  23.             -o-transition: All 0.4s ease-in-out;
  24.         }
  25.         .img1:hover {
  26.             transform: rotate(360deg);
  27.             -webkit-transform: rotate(360deg);
  28.             -moz-transform: rotate(360deg);
  29.             -o-transform: rotate(360deg);
  30.             -ms-transform: rotate(360deg);
  31.         }
  32.         /*效果二：放大 修改scale(放大的值)*/
  33.         .img2 {
  34.             transition: All 0.4s ease-in-out;
  35.             -webkit-transition: All 0.4s ease-in-out;
  36.             -moz-transition: All 0.4s ease-in-out;
  37.             -o-transition: All 0.4s ease-in-out;
  38.         }
  39.         .img2:hover {
  40.             transform: scale(1.2);
  41.             -webkit-transform: scale(1.2);
  42.             -moz-transform: scale(1.2);
  43.             -o-transform: scale(1.2);
  44.             -ms-transform: scale(1.2);
  45.         }
  46.        /*效果三：旋转放大 修改rotate(旋转度数) scale(放大值)*/
  47.         .img3 {
  48.             transition: All 0.4s ease-in-out;
  49.             -webkit-transition: All 0.4s ease-in-out;
  50.             -moz-transition: All 0.4s ease-in-out;
  51.             -o-transition: All 0.4s ease-in-out;
  52.         }
  53.         .img3:hover {
  54.             transform: rotate(360deg) scale(1.2);
  55.             -webkit-transform: rotate(360deg) scale(1.2);
  56.             -moz-transform: rotate(360deg) scale(1.2);
  57.             -o-transform: rotate(360deg) scale(1.2);
  58.             -ms-transform: rotate(360deg) scale(1.2);
  59.         }
  60.         /*效果四：上下左右移动 修改translate(x轴,y轴)*/
  61.         .img4 {
  62.             transition: All 0.4s ease-in-out;
  63.             -webkit-transition: All 0.4s ease-in-out;
  64.             -moz-transition: All 0.4s ease-in-out;
  65.             -o-transition: All 0.4s ease-in-out;
  66.         }
  67.         .img4:hover {
  68.             transform: translate(0, -10px);
  69.             -webkit-transform: translate(0, -10px);
  70.             -moz-transform: translate(0, -10px);
  71.             -o-transform: translate(0, -10px);
  72.             -ms-transform: translate(0, -10px);
  73.         }
  74.     </style>
  75. </head>
  76. <body>
  77. <div>效果一：360°旋转 </div>
  78. <div>效果二：放大</div>
  79. <div>效果三：旋转放大</div>
  80. <div>效果四：上下左右移动 </div>
  81. </body>
  82. </html>


CSS3实现图片循环旋转

</>code
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>图片循环旋转</title>
  6. <style>
  7. *{margin: 0; padding: 0;}
  8. .ta_c{text-align: center;
  9. margin-top: 100px;}
  10. @-webkit-keyframes rotation{
  11. from {-webkit-transform: rotate(0deg);}
  12. to {-webkit-transform: rotate(360deg);}
  13. }
  14. .Rotation{
  15. -webkit-transform: rotate(360deg);
  16. animation: rotation 3s linear infinite;
  17. -moz-animation: rotation 3s linear infinite;
  18. -webkit-animation: rotation 3s linear infinite;
  19. -o-animation: rotation 3s linear infinite;
  20. }
  21. .img{border-radius: 250px;}
  22. </style>
  23. </head>
  24. <body>
  25. <div class="ta_c">
  26. <img class="Rotation img" src="img/01.png" width="500" height="500"/>
  27. </div>
  28. </body>
  29. </html>


HTML实现图片360度循环旋转

效果图

11111.gif

</>code
  1. //css代码
  2. .header{
  3.     -webkit-animation:rotateImg 1s linear infinite;
  4.     width: 80px ;
  5.     height: 80px;
  6.     border: 1px solid #ccc;
  7.     vertical-align: middle;
  8. }
  9. @keyframes rotateImg {
  10.   0% {transform : rotate(0deg);}
  11.   100% {transform : rotate(360deg);}
  12. }
  13. @-webkit-keyframes rotateImg {
  14.     0%{-webkit-transform : rotate(0deg);}
  15.   100%{-webkit-transform : rotate(360deg);}
  16. }
  17. //html代码
  18. <img class="header" src="me.png">


如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛

您可能感兴趣的文章:

发表评论 (2272人查看，0条评论)
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
昵称：
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

公司信息

· 网站介绍
· 联系我们
· 加入我们
· 服务条款

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间：9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号