1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <style>
  6.         div{
  7.             width: 200px;
  8.             height: 100px;
  9.             background: pink;
  10.             border: 1px solid #ccc;
  11.             margin-bottom: 10px;
  12.         }
  13.         .box1{
  14.             transform: translate(20px, 15px);
  15.             -webkit-transform: translate(20px, 15px);
  16.             -moz-transform: translate(20px, 15px);
  17.             -ms-transform: translate(20px, 15px);
  18.             -o-transform: translate(20px, 15px);
  19.         }
  20.         .box2{
  21.             transform: translate3d(5px, 10px, 500px);
  22.             -webkit-transform: translate3d(5px, 10px, 500px);
  23.             -moz-transform: translate3d(5px, 10px, 500px);
  24.             -ms-transform: translate3d(5px, 10px, 500px);
  25.             -o-transform: translate3d(5px, 10px, 500px);
  26.         }
  27.         .box3{
  28.             transform: translateX(30px);
  29.             -webkit-transform: translateX(30px);
  30.             -moz-transform: translateX(30px);
  31.             -ms-transform: translateX(30px);
  32.             -o-transform: translateX(30px);
  33.         }
  34.         .box4{
  35.             transform: scale(2.0, 2.0);
  36.             -webkit-transform: scale(2.0, 2.0);
  37.             -moz-transform: scale(2.0, 2.0);
  38.             -ms-transform: scale(2.0, 2.0);
  39.             -o-transform: scale(2.0, 2.0);
  40.         }
  41.         .box5{
  42.             transform: scale3d(1, 1, 2.0);
  43.             -webkit-transform: scale3d(1, 1, 2.0);
  44.             -moz-transform: scale3d(1, 1, 2.0);
  45.             -ms-transform: scale3d(1, 1, 2.0);
  46.             -o-transform: scale3d(1,1, 2.0);
  47.         }
  48.         .box6{
  49.             transform: scaleZ(2);
  50.             -webkit-transform: scaleZ(2);
  51.             -moz-transform: scaleZ(2);
  52.             -ms-transform: scaleZ(2);
  53.             -o-transform: scaleZ(2);
  54.         }
  55.         .box7{
  56.             transform: rotate(30deg);
  57.             -webkit-transform: rotate(30deg);
  58.             -moz-transform: rotate(30deg);
  59.             -ms-transform: rotate(30deg);
  60.             -o-transform: rotate(30deg);
  61.         }
  62.         .box8{
  63.             transform: rotate3d(1, 1, -1, 30deg);
  64.             -webkit-transform: rotate3d(1, 1, -1, 30deg);
  65.             -moz-transform: rotate3d(1, 1, -1, 30deg);
  66.             -ms-transform: rotate3d(1, 1, -1, 30deg);
  67.             -o-transform: rotate3d(1, 1, -1, 30deg);
  68.         }
  69.         .box9{
  70.             transform: rotateX(80deg);
  71.             -webkit-transform: rotateX(80deg);
  72.             -moz-transform: rotateX(80deg);
  73.             -ms-transform: rotateX(80deg);
  74.             -o-transform: rotateX(80deg);
  75.         }
  76.         .box10{
  77.             transform: skew(30deg, 30deg);
  78.             -webkit-transform: skew(30deg, 30deg);
  79.             -moz-transform: skew(30deg, 30deg);
  80.             -ms-transform: skew(30deg, 30deg);
  81.             -o-transform: skew(30deg, 30deg);
  82.         }
  83.         .box11{
  84.             transform: skewX(45deg);
  85.             -webkit-transform: skewX(45deg);
  86.             -moz-transform: skewX(45deg);
  87.             -ms-transform: skewX(45deg);
  88.             -o-transform: skewX(45deg);
  89.         }
  90.         .box12{
  91.             position: relative;
  92.             padding: 20px;
  93.             perspective: 150;
  94.             -webkit-perspective: 150;
  95.         }
  96.         .box12>div{
  97.             width: 160px;
  98.             height: 60px;
  99.             border: 1px solid #ddd;
  100.             background: #09f;
  101.             transform: rotateX(45deg);
  102.             -webkit-transform: rotateX(45deg);
  103.             -moz-transform: rotateX(45deg);
  104.             -ms-transform: rotateX(45deg);
  105.             -o-transform: rotateX(45deg);
  106.         }
  107.         .box13{
  108.             background: #09f;
  109.             width: 200px;
  110.             transition: width 2s,background 2s;
  111.             -webkit-transition: width 2s,background 2s;
  112.             -moz-transition: width 2s,background 2s;
  113.             -ms-transition: width 2s,background 2s;
  114.             -o-transition: width 2s,background 2s;
  115.         }
  116.         .box13:hover{
  117.             width: 400px;
  118.             background: blue;
  119.         }
  120.         .box14{
  121.             position: relative;
  122.             animation: move 5s linear infinite alternate;;
  123.             -webkit-animation: move 5s linear infinite alternate;;
  124.             -moz-animation: move 5s linear infinite alternate;;
  125.             -ms-animation: move 5s linear infinite alternate;;
  126.             -o-animation: move 5s linear infinite alternate;
  127.         }
  128.         /* animation-play-state: paused|running;设置对象动画的状态，下例hover运动暂停 */
  129.         .box14:hover{
  130.             animation-play-state: paused;
  131.             -webkit-animation-play-state: paused;
  132.             -moz-animation-play-state: paused;
  133.         }
  134.  
  135.         @keyframes move {
  136.             from{left: 0px;}
  137.             to{left: 500px;}
  138.         }
  139.         @-webkit-keyframes move{
  140.             0%{left: 0px;}
  141.             100%{left: 500px;}
  142.         }
  143.         .box15 span{
  144.             display: block;
  145.             font-weight: bolder;
  146.             font-size: 20px;
  147.         }
  148.         .a1{
  149.             transform: translate(60px);
  150.             -webkit-transform: translate(60px);
  151.             -moz-transform: translate(60px);
  152.             animation: move1 2s ease-out forwards;
  153.             -webkit-animation: move1 2s ease-out forwards;
  154.             -moz-animation: move1 2s ease-out forwards;
  155.         }
  156.         @keyframes move1{
  157.             0%{transform: translate(0px);opacity: 0;}
  158.             40%{transform: translate(20px);opacity: 0.4;}
  159.             70%{transform: translate(40px);opacity: 1.0;}
  160.             100%{transform: translate(60px);opacity: 0;}
  161.         }
  162.         @-webkit-keyframes move1{
  163.             0%{-webkit-transform: translate(0px);opacity: 0;}
  164.             40%{-webkit-transform: translate(20px);opacity: 0.4;}
  165.             70%{-webkit-transform: translate(40px);opacity: 1.0;}
  166.             100%{-webkit-transform: translate(60px);opacity: 0;}
  167.         }
  168.         @-moz-keyframes move1{
  169.             0%{-moz-transform: translate(0px);opacity: 0;}
  170.             40%{-moz-transform: translate(20px);opacity: 0.4;}
  171.             70%{-moz-transform: translate(40px);opacity: 1.0;}
  172.             100%{-moz-transform: translate(60px);opacity: 0;}
  173.         }
  174.         .a3{
  175.             opacity: 0;
  176.             transform: translate(20px);
  177.             -webkit-transform: translate(20px);
  178.             -moz-transform: translate(20px);
  179.             animation: move3 2s ease-in 2s forwards;
  180.             -webkit-animation: move3 2s ease-in 2s forwards;
  181.             -moz-animation: move3 2s ease-in 2s forwards;
  182.         }
  183.         @keyframes move3{
  184.             0%{transform: translate(120px);opacity: 0;}
  185.             40%{transform: translate(80px);opacity: 0.4;}
  186.             70%{transform: translate(40px);opacity: 1.0;}
  187.             100%{transform: translate(20px);opacity: 0;}
  188.         }
  189.         @-webkit-keyframes move3{
  190.             0%{-webkit-transform: translate(120px);opacity: 0;}
  191.             40%{-webkit-transform: translate(80px);opacity: 0.4;}
  192.             70%{-webkit-transform: translate(40px);opacity: 1.0;}
  193.             100%{-webkit-transform: translate(20px);opacity: 0;}
  194.         }
  195.         @-moz-keyframes move3{
  196.             0%{-moz-transform: translate(120px);opacity: 0;}
  197.             40%{-moz-transform: translate(80px);opacity: 0.4;}
  198.             70%{-moz-transform: translate(40px);opacity: 1.0;}
  199.             100%{-moz-transform: translate(20px);opacity: 0;}
  200.         }
  201.         .a2{
  202.             opacity: 0;
  203.             font-size: 36px;
  204.             text-align: center;
  205.             animation: move2 2s ease-in 4s forwards;
  206.             -webkit-animation: move2 2s ease-in 4s forwards;
  207.             -moz-animation: move2 2s ease-in 4s forwards;
  208.         }
  209.         @keyframes move2{
  210.             0%{opacity: 0;}
  211.             20%{opacity: 0.6;}
  212.             40%{opacity: 0.8;}
  213.             60%{opacity: 0.4;}
  214.             80%{opacity: 0.8;}
  215.             100%{opacity: 1.0;}
  216.         }
  217.         @-webkit-keyframes move2{
  218.             0%{opacity: 0;}
  219.             20%{opacity: 0.6;}
  220.             40%{opacity: 0.8;}
  221.             60%{opacity: 0.4;}
  222.             80%{opacity: 0.8;}
  223.             100%{opacity: 1.0;}
  224.         }
  225.         @-moz-keyframes move2{
  226.             0%{opacity: 0;}
  227.             20%{opacity: 0.6;}
  228.             40%{opacity: 0.8;}
  229.             60%{opacity: 0.4;}
  230.             80%{opacity: 0.8;}
  231.             100%{opacity: 1.0;}
  232.         }
  233.     </style>
  234. </head>
  235. <body>
  236.     <!-- transform属性向元素应用2D或3D转换，我们可以旋转、缩放、移动、倾斜元素，语法：transform: none|transform-functions; -->
  237.     <!-- translate(x,y)--定义2D位移 -->
  238.     <div class="box1">translate(x,y)</div>
  239.     <!-- translate(x,y,z)--定义3D位移 -->
  240.     <div class="box2">translate(x,y,z)</div>
  241.     <!-- translateX(x)--定义只按X轴位移 (同理按Y轴，3D的Z轴)-->
  242.     <div class="box3">translateX(x)</div>
  243.  
  244.     <!-- scale(x,y)--定义2D缩放转换 -->
  245.     <div class="box4">scale(x,y)</div>
  246.     <!-- scale3d(x,y,z)--定义3D缩放转换 -->
  247.     <div class="box5">scale3d(x,y,z)</div>
  248.     <!-- scaleZ(z)--定义只按Z轴缩放（同理按Y轴，X轴） -->
  249.     <div class="box6">scaleZ(z)</div>
  250.  
  251.     <!-- rotate(angle)--定义2D旋转 -->
  252.     <div class="box7">rotate(angle)</div>
  253.     <!-- rotate3d(angle)--定义3D旋转 x,y,z的值组成在3d空间的矢量坐标，对象将会围绕这个坐标轴旋转-->
  254.     <div class="box8">rotate3d(x,y,z,angle)</div>
  255.     <!-- rotateX(angle) 定义沿X轴的3d旋转(同理设置Y轴Z轴的3d旋转)-->
  256.     <div class="box9">rotateX(angle)</div>
  257.  
  258.     <!-- skew(x-angle,y-angle) 定义沿X轴和Y轴的倾斜转换-->
  259.     <div class="box10">skew(x-angle,y-angle)</div>
  260.     <!-- skewX(xangle) 定义沿X轴的2d倾斜转换(同理设置Y轴的2d倾斜转换)-->
  261.     <div class="box11">skewX(angle)</div>
  262.  
  263.     <!-- perspective(n)为3D转换元素定义透视视图(当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身) -->
  264.     <div class="box12">
  265.         <div>perspective(n)</div>
  266.     </div>
  267.  
  268.     <!-- transition属性对元素设置对象变换时的过渡,用于设置4个过渡属性：
  269.     transition-property--参与过渡的属性、
  270.     transition-duration--对象过渡的持续时间、
  271.     transition-timing-function--对象中过渡的动画类型、
  272.     transition-delay--对象延迟过渡的时间 -->
  273.     <!-- 如果只提供一个<time>参数，则为 <' transition-duration '> 的值定义；如果提供二个<time>参数，则第一个为 <' transition-duration '> 的值定义，第二个为 <' transition-delay '> 的值定义 -->
  274.     <div class="box13">transition过渡效果</div>
  275.  
  276.     <!-- animation 设置对象元素的动画特效，用于设置6个动画属性（默认值none 0 ease 0 1 normal）：
  277.     animation-name--需要绑定到选择器上的动画名称、
  278.     animation-duration--完成动画所花费的时间、
  279.     animation-timing-function--规定动画的速度曲线、
  280.     animation-delay--规定在动画开始前的延迟、
  281.     animation-iteration-count--规定动画播放的次数、
  282.     animation-direction--规定动画是否轮流反向播放
  283.     ( forwards--当动画完成后，保持最后一个属性值 )-->
  284.     <div class="box14">animation动画特效</div>
  285.     <div class="box15">
  286.         <span class="a1">css3 animation</span>
  287.         <span class="a2">css3 animation</span>
  288.         <span class="a3">css3 animation</span>
  289.     </div>
  290. </body>
  291. </html>

自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法的更多相关文章

  1. 关于CSS3中transform变换的小坑

    2017年6月30日15:05:46 今天在写一个demo的时候,发现CSS3中transform变换的一个特性. 首先,我先描述一下我发现的情况(问题再现): <div class=" ...

  2. 第98天：CSS3中transform变换详解

    transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...

  3. css 动画（二） transition 过渡 & animation 动画

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! translate:平移:是transform的一个属性: transform:变形:是一个静态属性,可以 ...

  4. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  5. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  6. css3实践之图片轮播（Transform，Transition和Animation）

    楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...

  7. CSS3 Transform、Transition和Animation属性总结

    CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...

  8. CSS3中和动画有关的属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个  transform. transition 和 animation.下面来一一说明:        transform     从字面来看transform的释义为 ...

  9. 好吧，CSS3 3D transform变换，不过如此！

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

随机推荐

  1. Codeforces 842C--Ilya And The Tree(dfs+树)

    原题链接:http://codeforces.com/contest/842/problem/C 题意:一个以1为根节点的树,每个节点有一个值ai,定义美丽度:从根节点到这个节点的路径上所有ai的gc ...

  2. c#蜘蛛

    C#写一个采集器 using System; using System.Collections.Generic; using System.Text; using System.Net; using ...

  3. PHP之namespace小结

    命名空间的使用 在声明命名空间之前唯一合法的代码是用于定义源文件编码方式的 declare 语句.所有非 PHP 代码包括空白符都不能出现在命名空间的声明之前. PHP 命名空间中的类名可以通过三种方 ...

  4. git配置密钥（私钥、ssh、公钥）

    参照: https://blog.csdn.net/weixin_42063071/article/details/80999690 经常帮人配置git的私钥,来总结一下简单的流程真心希望对大家有所帮 ...

  5. CATiledLayer显示超大图片的解决方案

    先对图片进行了裁剪 -> 很多小图片, 然后再根据显示 进行绘制 - (void)viewDidLoad { [super viewDidLoad]; [self cutImageAndSave ...

  6. Linux查看文件大小5个常用命令

    1. 前言 Linux 系统有非常好用的命令,功能也非常丰富,如果你对命令行工具熟悉,可以非常高效率完成维护工具.本文主要介绍Linux系统中,用于查看文件大小的命令. Linux 查看文件大小5个常 ...

  7. androidmanifest.xml 解码工具又来一发

    背景: 最近这几天在研究facebook的协议,但是facebook的采用 SSL Pinning 技术,正常通过fiddler是不能解开SSL观察协议. 听说facebook app在 manife ...

  8. Java程序员必精通之—synchronized

    更多Java并发文章:https://www.cnblogs.com/hello-shf/category/1619780.html 一.简介 相信每一个java程序员对synchronized都不会 ...

  9. Cocos2d-x之Label

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. 在游戏开发中经常会使用标签文字,例如,游戏介绍,玩家积分,菜单选项,文字提示等等.      LabelTTF 直接支持使用 TTF 字库 ...

  10. qq传文件测试用例设计