纯CSS实现可切换旋转的立体小盒子

头像
王刚
    阅读 8 分钟
    6

    好久没更新了，咳咳。
    情况是这样的，周五在公司前端组开技术分享会，担心干货不够，所以周四晚上连夜写了这么一个Demo出来哗众取宠，实际上效果还是挺不错的，这次装了一手好逼，只不过当时组内的妹子们都没来，没能看到这盛大的场面，唉，简直遗憾至极。

    先把Demo上了：http://output.jsbin.com/joqidi

    效果图

    图片描述

    原理

    用CSS3实现立体的盒子其实挺简单的，其核心就是CSS3的transform变换。
    更详细的介绍请移步张大大的文章：《CSS3 3D transform变换，不过如此！》

    我在这边简单说下本Demo的原理：

    1. 用一个DIV.cube-wrap做外部容器，并给其设置 -webkit-perspective相关属性;

    .cube-wrap{
    position: relative;
    height: 100%;
    transition: .6s;
    -webkit-perspective: 2000;
    -webkit-perspective-origin: 50% 50%;
}

    注：可以调整perspective和perspective-origin的值来看效果，一看即懂

    2.再用一个DIV.cube做内部容器

    .cube{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 300px;
    height: 100px;
    margin: auto;
    transition: .8s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50% -75px;
    -webkit-backface-visibility: visible;
}

    其实一般的话只要一层容器就够了，直接把perspective设置在body上。但是因为本Demo有个放大的效果，单层容器似乎做不到~~，所以用了两层。

    3.在内部容器放6个DIV来充当6个面，然后运用transform变换来让它们组成一个立体的小盒子

    .cube-face{
    position: relative;
    background-color: #eb4c89;
    outline: 1px solid rgba(0,0,0,.1);
    outline-offset: -1px;
}
.cube-face-top{
    position: absolute;
    width: 300px;
    height: 150px;
    top: -150px;
    left: 0;
    -webkit-transform: rotateX(90deg);
    -webkit-transform-origin: 0 100%;
}
.cube-face-top:after,
.cube-face-bottom:after{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.1);
}
.cube-face-left{
    position: absolute;
    top: 0;
    width: 150px;
    height: 100px;
    left: -150px;
    -webkit-transform: rotateY(-90deg);
    -webkit-transform-origin: 100% 0;
}

.cube-face-left:after,
.cube-face-right:after{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.2);
}
.cube-face-front{
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100px;
}
.cube-face-back{
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100px;
    -webkit-transform: translateZ(-150px) rotateY(180deg);
}
.cube-face-right{
    position: absolute;
    top: 0;
    width: 150px;
    height: 100px;
    right: -150px;
    -webkit-transform: rotateY(90deg);
    -webkit-transform-origin: 0 0;
}
.cube-face-bottom{
    position: absolute;
    top: 100px;
    width: 300px;
    height: 150px;
    -webkit-transform: rotateX(-90deg);
    -webkit-transform-origin: 0 0;
}

    里面的几个::after是为了在给其中几个面加上阴影，让效果更“真实”一点

    5.现在的话一个立体的小盒子已经完成了，不过需要把内部容器.cube旋转一下，才能看到效果，我们用一排按钮来实现对.cube的transform:rotate的控制：

    #show-front:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(0) rotateY(0);
}
#show-back:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(0) rotateY(180deg);
}
#show-left:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(0) rotateY(90deg);
}
#show-right:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(0) rotateY(-90deg);
}
#show-top:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(-90deg) rotateY(0);
}
#show-bottom:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(90deg) rotateY(0);
}

    看吧，这里又用到了:checked和~的神奇组合。

    完整的DOM结构如下

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Cube</title>
</head>
<body>
    <input type="checkbox" id="zoom-cube">
    <input type="radio" name="cube-controller" id="show-front" checked>
    <input type="radio" name="cube-controller" id="show-back">
    <input type="radio" name="cube-controller" id="show-top">
    <input type="radio" name="cube-controller" id="show-bottom">
    <input type="radio" name="cube-controller" id="show-left">
    <input type="radio" name="cube-controller" id="show-right">
    <div class="cube-wrap">
        <div class="cube">
            <div class="cube-face cube-face-front"><i>Front</i></div>
            <div class="cube-face cube-face-back"><i>Back</i></div>
            <div class="cube-face cube-face-top"><i>Top</i></div>
            <div class="cube-face cube-face-left"><i>Left</i></div>
            <div class="cube-face cube-face-right"><i>Right</i></div>
            <div class="cube-face cube-face-bottom"><i>BOttom</i></div>
        </div>
    </div>
    <div class="button-wrap">
        <label class="for-front" for="show-front">Front</label>
        <label class="for-back" for="show-back">Back</label>
        <label class="for-top" for="show-top">Top</label>
        <label class="for-bottom" for="show-bottom">Bottom</label>
        <label class="for-left" for="show-left">Left</label>
        <label class="for-right" for="show-right">Right</label>
        <label class="for-zoom-cube" for="zoom-cube">Zoom</label>
    </div>
</body>
</html>

    完整的CSS代码如下

    html,body{
    background-color: #eb4c89;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.cube-wrap{
    position: relative;
    height: 100%;
    transition: .6s;
    -webkit-perspective: 2000;
    -webkit-perspective-origin: 50% 50%;
}
#zoom-cube:checked ~ .cube-wrap{
    transform: scale(1.6);
}
.cube{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 300px;
    height: 100px;
    margin: auto;
    transition: .8s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50% -75px;
    -webkit-backface-visibility: visible;
}
#show-front:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(0) rotateY(0);
}
#show-back:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(0) rotateY(180deg);
}
#show-left:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(0) rotateY(90deg);
}
#show-right:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(0) rotateY(-90deg);
}
#show-top:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(-90deg) rotateY(0);
}
#show-bottom:checked ~ .cube-wrap .cube{
    -webkit-transform: rotateX(90deg) rotateY(0);
}
.cube-face{
    position: relative;
    background-color: #eb4c89;
    outline: 1px solid rgba(0,0,0,.1);
    outline-offset: -1px;
}
.cube-face i{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 40px;
    margin: auto;
    color: #fff;
    font-size: 36px;
    text-align: center;
    line-height: 40px;
}
.cube-face-top{
    position: absolute;
    width: 300px;
    height: 150px;
    top: -150px;
    left: 0;
    -webkit-transform: rotateX(90deg);
    -webkit-transform-origin: 0 100%;
}
.cube-face-top:after,
.cube-face-bottom:after{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.1);
}
.cube-face-left{
    position: absolute;
    top: 0;
    width: 150px;
    height: 100px;
    left: -150px;
    -webkit-transform: rotateY(-90deg);
    -webkit-transform-origin: 100% 0;
}
.cube-face-left:after,
.cube-face-right:after{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.2);
}
.cube-face-front{
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100px;
}
.cube-face-back{
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100px;
    -webkit-transform: translateZ(-150px) rotateY(180deg);
}
.cube-face-right{
    position: absolute;
    top: 0;
    width: 150px;
    height: 100px;
    right: -150px;
    -webkit-transform: rotateY(90deg);
    -webkit-transform-origin: 0 0;
}
.cube-face-bottom{
    position: absolute;
    top: 100px;
    width: 300px;
    height: 150px;
    -webkit-transform: rotateX(-90deg);
    -webkit-transform-origin: 0 0;
}
input{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.button-wrap{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 840px;
    height: 50px;
    margin: 0 auto;
    font-size: 0;
    text-align: center;
}
.button-wrap label{
    display: inline-block;
    width: 120px;
    height: 50px;
    margin: 0;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 52px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: .3s;
    background-color: rgba(255,255,255,.2);
    transform: translateY(50px);
}
.button-wrap:hover label{
    transform: translateY(0);
}
.button-wrap label:hover{
    background-color: rgba(255,255,255,.3);
}
#show-front:checked ~ .button-wrap .for-front,
#show-back:checked ~ .button-wrap .for-back,
#show-left:checked ~ .button-wrap .for-left,
#show-right:checked ~ .button-wrap .for-right,
#show-top:checked ~ .button-wrap .for-top,
#show-bottom:checked ~ .button-wrap .for-bottom,
#zoom-cube:checked ~ .button-wrap .for-zoom-cube{
    background-color: #fff;
    color: #eb4c89;
}

    照旧只是演示，所以只加了-webkit-前缀。

    好了，就这样了，各位周日愉快！

    css3html
    王刚
    1.6k 声望59 粉丝

    一个偏展现层的前端开发者

    « 上一篇
    用纯CSS实现简单的相册幻灯片
    下一篇 »
    一个简单的Web音频数据可视化模块

    引用和评论

    推荐阅读
    头像
    使用SVG + CSS实现动态霓虹灯文字效果

    王刚赞 43阅读 18.1k评论 2

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    0 条评论
    得票最新