css3D立方体制作

  • CSS 3D立方体制作分享

    无需JavaScript, imagery, canvas 或者SVG,就可以利用最新的CSS制作出3D立方体,这的确是一件让人难以想象的事情。 目前制作出来的效果,只有Firefox 3.5,Safari 3.2+,Google Chorme支持。下面来为大家列举出相关演示和代码。   3D CSS 结果演示 支持浏览器:Safari 3.2+, Google Chrome, Firefox 3.5+ 支持浏览器:Safari 4+, Google Chrome 怎么制作? 其实使用DIV容器的代码很简单,如下: <div class="cube">
    <div class="topFace">
    <div>Content</div>
    </div>
    <div class="leftFace">Content</div>
    <div class="rightFace">Content</div>
    </div> CSS来控制 .cube {
    position: relative;
    top: 200px;
    }
     
    .rightFace,
    .leftFace,
    .topFace div {
    padding: 10px;
    width: 180px;
    height: 180px;
    }
     
    .rightFace,
    .leftFace,
    .topFace {
    position: absolute;
    }
     
    .leftFace {
    -webkit-transform: skewY(30deg);
    -moz-transform: skewY(30deg);
    background-color: #ccc;
    }
     
    .rightFace {
    -webkit-transform: skewY(-30deg);
    -moz-transform: skewY(-30deg);
    background-color: #ddd;
    left: 200px;
    }
     
    .topFace div {
    -webkit-transform: skewY(-30deg) scaleY(1.16);
    -moz-transform: skewY(-30deg) scaleY(1.16);
    background-color: #eee;
    font-size: 0.862em;
    }
     
    .topFace {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    top: -158px;
    left: 100px;
    }

    css干货教程 2020年4月12日 46