码迷,mamicode.com
首页 > 其他好文 > 详细

简单的3d变换

时间:2017-12-25 20:54:18      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:jpg   reserve   ps1   ati   hidden   img   doctype   名称   type   

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   .box{
    width: 500px;
    height: 300px;
    margin: 100px auto 0;
    overflow: hidden;
   }
   .box img{
    float: left;
   }
   #and{
    perspective:600;
    transform-style: preserve-3d;
    /*动画名称 动画时间  速度曲线(liner,ease,ease-in.ease-out,ease-in-out) 动画前延迟 动画播放次数(n|infinite) */
    animation: animation-x 7s linear 0s infinite;
   }
   .i3d,.l3d{
    transform-style: preserve-3d;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
   }
   @keyframes animation-x{
    0%{transform: rotateX(0deg);}
    50%{transform: rotateX(180deg);}
    100%{transform: rotateX(360deg);}
   }
   #animate1{
    animation: animation-y 5s linear 0s infinite;
   }
   #animate3{
    animation: animation-y 3s linear 0s infinite;
   }
   @keyframes animation-y{
    0%{transform: rotateY(0deg);}
    50%{transform: rotateY(180deg);}
    100%{transform: rotateY(360deg);}
   }
   #animate2{
    animation: animation-second 4s linear 0s infinite;
   }
   @keyframes animation-second{
    0%{transform: rotateY(360deg);}
    50%{transform: rrotateY(180deg);}
    100%{transform: rotateY(0deg);}
   }
  </style>
 </head>
 <body>
  <div id="and" class="box">
   <div id="animate1" class="l3d">
         <img class="i3d" src="image/ps1.jpg" />
         <img class="i3d" src="image/ps2.jpg" />
         <img class="i3d" src="image/ps3.jpg" />
         <img class="i3d" src="image/ps4.jpg" />
         <img class="i3d" src="image/ps5.jpg" />
      </div>
      <div id="animate2" class="l3d">         
          <img class="i3d" src="image/ps6.jpg" />
          <img class="i3d" src="image/ps7.jpg" />
          <img class="i3d" src="image/ps8.jpg" />
          <img class="i3d" src="image/ps9.jpg" />
          <img class="i3d" src="image/ps10.jpg" />
      </div>
      <div id="animate3" class="l3d">     
          <img class="i3d" src="image/ps11.jpg" />
          <img class="i3d" src="image/ps12.jpg" />
          <img class="i3d" src="image/ps13.jpg" />
          <img class="i3d" src="image/ps14.jpg" />
          <img class="i3d" src="image/ps15.jpg" />
      </div>
  </div>
 </body>
</html>

简单的3d变换

标签:jpg   reserve   ps1   ati   hidden   img   doctype   名称   type   

原文地址:https://www.cnblogs.com/0828-li/p/8111009.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!