<input id="4cgqc"></input>
  • <input id="4cgqc"></input>
  • <menu id="4cgqc"></menu>
  • <menu id="4cgqc"></menu>
  • 用css3簡單的制作3d半透明立方體圖片展示

    2016/11/18 8:35:27   閱讀:758    發布者:758

    <html>
    <head>
    <title> new document </title>
    <meta name="generator" content="editplus" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta charset="utf-8"/>
    <style type="text/css">

    //css部分
    html{
    font-size:62.5%;
    }
    img{
    width:300px;
    height:300px;
    }
    #stage{

    //搭建一個舞臺
    margin-top:200px;
    margin-left:auto;
    margin-right:auto;
    width:300px;
    height:300px;
    perspective:1200px;
    font-size:5em;
    font-weight:bold;
    color:#cc00ff;

    }
    .cube{

    //cube是正方體
    position:relative;
    transform:rotateX(-45deg) rotateY(45deg);
    transform-style:preserve-3d;
    transition: all .6s;
    }
    .side{
    color:blue;
    text-align:center;
    width:300px;
    height:300px;
    line-height:300px;
    position:absolute;
    background:#cc66ff;
    opacity:0.5;
    border:1px solid rgba(117,4,24,0.5);

    }

    //.front到.bottom是6個面分別進行旋轉,構建出正方體的整形
    .front{
    transform:translateZ(150px);
    }
    .back{
    transform:rotateY(180deg) translateZ(150px);
    }
    .left{
    transform:rotateY(-90deg) translateZ(150px);
    }
    .right{
    transform:rotateY(90deg) translateZ(150px);
    }
    .top{
    transform:rotateX(90deg) translateZ(150px);
    }
    .bottom{
    transform:rotatex(-90deg) translateZ(150px);
    }
    #stage:hover .cube{

    //設置鼠標移上正方體時是否需要過渡效果以及過渡效果開始和結束的時間和速度
    transform:rotateX(-45deg) rotateY(225deg);
    transition:transform .6s;
    }
    </style>
    </head>

    //div部分

    <body>
    <div id="stage">
    <div class="cube">
    <div class="side front"><img src="6.gif" alt="" /></div>
    <div class="side back"><img src="2.jpg" alt="" /></div>
    <div class="side left"><img src="3.jpg" alt="" /></div>
    <div class="side right"><img src="4.jpg" alt="" /></div>
    <div class="side top"><img src="5.jpg" alt="" /></div>
    <div class="side bottom"><img src="1.jpg" alt="" /></div>
    </div>
    </div>

    </body>
    </html>

    欧美性开放BBW