zoukankan      html  css  js  c++  java
  • CSS3D写3d画廊滚动

    CSS样式表

    *{
    margin: 0;
    padding: 0;
    }
    .wrapper{
    800px;
    height: 600px;
    background: #87CEEB;
    margin: 0 auto;
    position: relative;
    }
    ul{
    position: relative;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    800px;
    height: 600px;
    transform-style: preserve-3d;
    }

    ul:hover{
    transition: all 5s;
    transform: rotateY(360deg);
    }

    li{
    190px;
    height: 300px;
    border-radius: 15px;
    list-style: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    }

    HTML5结构

    <div class="wrapper">
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    </div>

    Script代码

    <script type="text/javascript">
    var colorBox = ["yellow","green","blue","black","orange","gray","skyblue","red","#ADFF2F"];
    for (var i=0;i<8;i++) {
    $("li")[i].style.background = colorBox[i];
    $("li")[i].style.transform = "rotateY("+(i*45)+"deg) translateZ(300PX)"
    }
    </script>

    最最重要的是:translateZ() 一定要放在rotate之后,不然没作用

  • 相关阅读:
    12迭代器
    11(2)Vector(向量)
    11(1) LinkList ---链表
    11集合(Collection<E>) Arraylist
    10异常
    乘法计算过程的模拟
    10 Date详解
    详细的OA系统学习
    8 math类
    Java开发中的23种设计模式详解
  • 原文地址:https://www.cnblogs.com/MainActivity/p/7261453.html
Copyright © 2011-2022 走看看