純CSS實現可切換旋轉的立體小盒子

時間  2019-11-06
標籤 css 實現 切換 旋轉 立體 小盒子 欄目 CSS 简体版
原文   原文鏈接

很久沒更新了，咳咳。
狀況是這樣的，週五在公司前端組開技術分享會，擔憂乾貨不夠，因此週四晚上連夜寫了這麼一個Demo出來譁衆取寵，實際上效果仍是挺不錯的，此次裝了一手好逼，只不過當時組內的妹子們都沒來，沒能看到這盛大的場面，唉，簡直遺憾至極。css

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

效果圖

圖片描述

原理

用CSS3實現立體的盒子其實挺簡單的，其核心就是CSS3的transform變換。
更詳細的介紹請移步張大大的文章：《CSS3 3D transform變換，不過如此！》前端

我在這邊簡單說下本Demo的原理：css3

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的值來看效果，一看即懂web

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有個放大的效果，單層容器彷佛作不到~~，因此用了兩層。wordpress

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是爲了在給其中幾個面加上陰影，讓效果更「真實」一點spa

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和~的神奇組合。3d

完整的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-前綴。code

好了，就這樣了，各位週日愉快！orm

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程