zoukankan      html  css  js  c++  java
  • CSS3 3D图片立方体旋转

    html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>CSS3制作3D图片立方体旋转特效</title>
        <link rel="stylesheet" href="3d.css">
    </head>
    <body>
        <div class="wrap">
            <div class="cube">
                <div class="out_front">
                    <img src="img/1.png" class="pic">
                </div>
                <div class="out_back">
                    <img src="img/2.png" class="pic">
                </div>
                <div class="out_left">
                    <img src="img/3.png" class="pic">
                </div>
                <div class="out_right">
                    <img src="img/4.png" class="pic">
                </div>
                <div class="out_top">
                    <img src="img/5.png" class="pic">
                </div>
                <div class="out_bottom">
                    <img src="img/6.png" class="pic">
                </div>
                <span class="in_front">
                    <img src="img/7.png" class="in_pic">
                </span>
                <span class="in_back">
                    <img src="img/8.png" class="in_pic">
                </span>
                <span class="in_left">
                    <img src="img/9.png" class="in_pic">
                </span>
                <span class="in_right">
                    <img src="img/10.png" class="in_pic">
                </span>
                <span class="in_top">
                    <img src="img/11.png" class="in_pic">
                </span>
                <span class="in_bottom">
                    <img src="img/12.png" class="in_pic">
                </span>
            </div>
        </div>
    </body>
    </html>
    View Code

    css

    html{
      background:linear-gradient(#ff0 0%,#000 80%);
        height: 100%; 
    }
    .wrap{
      width: 650px;
      height: 200px;
      margin: 150px 360px;
      position: relative;
      
    }
    
    .cube{
      width: 200px;
      height: 200px;
      margin: 0 auto;
      transform-style: preserve-3d;
      transform: rotateX(-30deg) rotateY(-80deg);
      -webkit-animation: rotate 20s infinite;
      animation-timing-function: linear;
    }
    @-webkit-keyframes rotate{
      from{transform: rotateX(0deg) rotateY(0deg);}
      to{transform: rotateX(360deg) rotateY(360deg);}
    }
    .cube div{
      position: absolute;
      width: 200px;
      height: 200px;
      opacity: 0.8;
      transition: all .4s;
    }
    
    .pic{
      width: 200px;
      height: 200px;
    }
    .cube .out_front{
      transform: rotateY(0deg) translateZ(100px);
    }
    .cube .out_back{
      transform: translateZ(-100px) rotateY(180deg);
    }
    .cube .out_left{
      transform: rotateY(90deg) translateZ(100px);
    }
    .cube .out_right{
      transform: rotateY(-90deg) translateZ(100px);
    }
    .cube .out_top{
      transform: rotateX(90deg) translateZ(100px);
    }
    .cube .out_bottom{
      transform: rotateX(-90deg) translateZ(100px);
    }
    
    
    .cube span{
      display: bloack;
      width: 100px;
      height: 100px;
      position: absolute;
      top: 50px;
      left: 50px;
    }
    .cube .in_pic{
      width: 100px;
      height: 100px;
    }
    .cube .in_front{
      transform: rotateY(0deg) translateZ(50px);
    }
    .cube .in_back{
      transform: translateZ(-50px) rotateY(180deg);
    }
    .cube .in_left{
      transform: rotateY(90deg) translateZ(50px);
    }
    .cube .in_right{
      transform: rotateY(-90deg) translateZ(50px);
    }
    .cube .in_top{
      transform: rotateX(90deg) translateZ(50px);
    }
    .cube .in_bottom{
      transform: rotateX(-90deg) translateZ(50px);
    }
    
    
    .cube:hover .out_front{
      transform: rotateY(0deg) translateZ(200px);
    }
    .cube:hover .out_back{
      transform: translateZ(-200px) rotateY(180deg);
    }
    .cube:hover .out_left{
      transform: rotateY(90deg) translateZ(200px);
    }
    .cube:hover .out_right{
      transform: rotateY(-90deg) translateZ(200px);
    }
    .cube:hover .out_top{
      transform: rotateX(90deg) translateZ(200px);
    }
    .cube:hover .out_bottom{
      transform: rotateX(-90deg) translateZ(200px);
    }
    View Code
  • 相关阅读:
    我的程序员之路(6)——离职
    oracle手记(二)
    关于抽象类和接口
    Oracle学习手记
    DHTML
    XmlDocument,XmlNode,XmlElement创建复杂XML文档
    一首诗
    PC端口知识(转)
    sharpPDF.NET生成PDF文件
    Socket接口原理及C#实现
  • 原文地址:https://www.cnblogs.com/justSmile2/p/10768071.html
Copyright © 2011-2022 走看看