简单的3d变换

最新推荐文章于 2023-12-05 20:57:49 发布

weixin_30399797

最新推荐文章于 2023-12-05 20:57:49 发布

阅读量51

点赞数

原文链接：http://www.cnblogs.com/0828-li/p/8111009.html

版权

<!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>

转载于:https://www.cnblogs.com/0828-li/p/8111009.html

weixin_30399797

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的3d变换

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.box{width: 500px;height: 300px;margin: 100px auto 0;overflow...
复制链接

扫一扫

简单的3d变换

“相关推荐”对你有帮助么？