随笔- 234 文章- 0 评论- 14 阅读- 39万

用CSS实现3D 滚动的立方体

　　用css3写3D立方体用到的属性不多，就那么几个：perspective，transform-style，以及transform。

　　目前来说能完美支持3D的浏览器有chrome、safari，火狐也支持。所以本文的css3代码都只加了webkit前缀，因为产生3D的关键属性perspective其他浏览器都不支持，所以其他浏览器是应该是看不了3D的，所以看本文的例子请用chrome或者safari来看哦。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS鼠标移入效果</title>
    <style>
    *{margin: 0px;padding: 0px;}
    body{background: #222;}
    div.wrap{
        width: 200px;
        perspective: 1000px;/*景深*/
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);/*移动*/
    }
    .cube{
        width: 200px;
        height:200px;
        position: relative;
        transform-style: preserve-3d;/*所有子元素在3D空间中呈现*/
        transform: rotateX(-50deg) rotateY(50deg) rotateZ(0deg);
        animation: move 8s infinite linear;
    }
    .cube>div{
        width: 100%;
        height: 100%;
        background: #000;
        position: absolute;
        box-shadow: 0 0 30px currentColor;
    }
    .cube:hover div{
        background: currentColor;
        box-shadow: 0 0 60px currentColor;
    }
    .cube .out_front{
        color: red;
        transform: translateZ(100px);
    }
    .cube .out_back{
        color: orange;
        transform: translateZ(-100px);
    }
    .cube .out_left{
        color: blue;
        transform: translateX(-100px) rotateY(-90deg);
    }
    .cube .out_right{
        color: green;
        transform: translateX(100px) rotateY(90deg);
    }
    .cube .out_top{
        color: aqua;
        transform: translateY(-100px) rotateX(-90deg);
    }
    .cube .out_bottom{
        color: purple;
        transform: translateY(100px) rotateX(90deg);
    }

    /*帧动画*/
    @keyframes move{
    0%{
        transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) ;
    }
    100%{
        transform:rotateX(720deg) rotateY(360deg) rotateZ(360deg);
    }
}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="cube">
            <div class="out_front"></div>
            <div class="out_back"></div>
            <div class="out_left"></div>
            <div class="out_right"></div>
            <div class="out_top"></div>
            <div class="out_bottom"></div>
        </div>
    </div>
</body>
</html>