zoukankan      html  css  js  c++  java
  • 简单的做一个旋转正六面体吧

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
    body{
    perspective: 2000px;
    background: black;
    }
    .wrap{
    transform-style: preserve-3d;
    300px;height: 300px;
    margin: 180px auto;
    position: relative;
    animation: move 8s infinite ;
    }
    .wrap div{
    300px;height: 300px;
    position: absolute;
    opacity: 0.8;
    }
    .wrap div:nth-child(1){
    transform: translateZ(-150px);
    }
    .wrap div:nth-child(2){
    transform: translateZ(150px);
    }
    .wrap div:nth-child(3){
    transform: rotateX(90deg) translateZ(150px);
    }
    .wrap div:nth-child(4){
    transform: rotateX(90deg) translateZ(-150px);
    }
    .wrap div:nth-child(5){
    transform: rotateY(90deg) translateZ(150px);
    }
    .wrap div:nth-child(6){
    transform: rotateY(90deg) translateZ(-150px);
    }
    /*.wrap:hover{
    transform: rotateY(360deg) rotateX(360deg);
    }*/
    @keyframes move{
    0%{transform: rotateY(0) rotateX(0);}

    50%{transform: rotateY(360deg) rotateX(360deg);}


    }
    div img{
    100%;
    height: 100%;
    }
    </style>
    </head>
    <body>
    <div class="wrap">
    <div class="div1"><img src="image/1.jpg"/></div>
    <div class="div2"><img src="image/2.jpg"/></div>
    <div class="div3"><img src="image/3.jpg"/></div>
    <div class="div4"><img src="image/4.jpg"/></div>
    <div class="div5"><img src="image/5.jpg"/></div>
    <div class="div6"><img src="image/6.jpg"/></div>
    </div>
    </body>
    </html>

  • 相关阅读:
    java中高级软件工程师面试总结
    失败的面试经历
    解决webstorm打开包含node_modules项目卡死问题
    通俗易懂的理解javascript闭包
    javascript实现silverlight pivotViewer控件
    javascript面向对象
    吐槽一下万网空间
    html5的Canvas
    前端CSS兼容的一些思路
    Win10 Ubuntu子系统访问Windows目录
  • 原文地址:https://www.cnblogs.com/Masterlei/p/5730440.html
Copyright © 2011-2022 走看看