CSS 製作3D魔方愛的魔方給女(男)朋友一個感動

阿新 • • 發佈：2018-11-29

首先上效果圖：

是不是很炫呢！

沒有？

好吧！只能發個大招了，來看下動態的效果吧

http://www.meipai.com/media/395929464

效果還算可以吧，相信只要你用心，你會做出更炫的效果。把你們的生活點滴記錄在上面，你的他/她肯定會非常感動的。

好了，是不是已經迫及待的想看看到底是怎麼實現的了！

下面先附上HTML的程式碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>愛的魔方</title>
    <link rel="stylesheet" type="text/css" href="Rubiks_Cube.css">
</head>

<body>
    <div class="main">
        <img src="img/bg.jpg" class="bgimg">
        <div class="stage">
            <div class="cube Ani-rotate">
                <div class="one">
                    <div>
                        <img src="img/1-1.gif">
                    </div>
                    <div>
                        <img src="img/1-2.gif">
                    </div>
                    <div>
                        <img src="img/1-3.gif">
                    </div>
                    <div>
                        <img src="img/1-4.gif">
                    </div>
                    <div>
                        <img src="img/1-5.gif">
                    </div>
                    <div>
                        <img src="img/1-6.gif">
                    </div>
                    <div>
                        <img src="img/1-7.gif">
                    </div>
                    <div>
                        <img src="img/1-8.gif">
                    </div>
                    <div>
                        <img src="img/1-9.gif">
                    </div>
                </div>
                <div class="two">
                    <div>
                        <img src="img/2-1.gif">
                    </div>
                    <div>
                        <img src="img/2-2.gif">
                    </div>
                    <div>
                        <img src="img/2-3.gif">
                    </div>
                    <div>
                        <img src="img/2-4.gif">
                    </div>
                    <div>
                        <img src="img/2-5.gif">
                    </div>
                    <div>
                        <img src="img/2-6.gif">
                    </div>
                    <div>
                        <img src="img/2-7.gif">
                    </div>
                    <div>
                        <img src="img/2-8.gif">
                    </div>
                    <div>
                        <img src="img/2-9.gif">
                    </div>
                </div>
                <div class="three">
                    <div>
                        <img src="img/3-1.gif">
                    </div>
                    <div>
                        <img src="img/3-2.gif">
                    </div>
                    <div>
                        <img src="img/3-3.gif">
                    </div>
                    <div>
                        <img src="img/3-4.gif">
                    </div>
                    <div>
                        <img src="img/3-5.gif">
                    </div>
                    <div>
                        <img src="img/3-6.gif">
                    </div>
                    <div>
                        <img src="img/3-7.gif">
                    </div>
                    <div>
                        <img src="img/3-8.gif">
                    </div>
                    <div>
                        <img src="img/3-9.gif">
                    </div>
                </div>
                <div class="four">
                    <div>
                        <img src="img/4-1.gif">
                    </div>
                    <div>
                        <img src="img/4-2.gif">
                    </div>
                    <div>
                        <img src="img/4-3.gif">
                    </div>
                    <div>
                        <img src="img/4-4.gif">
                    </div>
                    <div>
                        <img src="img/4-5.gif">
                    </div>
                    <div>
                        <img src="img/4-6.gif">
                    </div>
                    <div>
                        <img src="img/4-7.gif">
                    </div>
                    <div>
                        <img src="img/4-8.gif">
                    </div>
                    <div>
                        <img src="img/4-9.gif">
                    </div>
                </div>
                <div class="five">
                    <div>
                        <img src="img/5-1.gif">
                    </div>
                    <div>
                        <img src="img/5-2.gif">
                    </div>
                    <div>
                        <img src="img/5-3.gif">
                    </div>
                    <div>
                        <img src="img/5-4.gif">
                    </div>
                    <div>
                        <img src="img/5-5.gif">
                    </div>
                    <div>
                        <img src="img/5-6.gif">
                    </div>
                    <div>
                        <img src="img/5-7.gif">
                    </div>
                    <div>
                        <img src="img/5-8.gif">
                    </div>
                    <div>
                        <img src="img/5-9.gif">
                    </div>
                </div>
                <div class="six">
                    <div>
                        <img src="img/6-1.gif">
                    </div>
                    <div>
                        <img src="img/6-2.gif">
                    </div>
                    <div>
                        <img src="img/6-3.gif">
                    </div>
                    <div>
                        <img src="img/6-4.gif">
                    </div>
                    <div>
                        <img src="img/6-5.gif">
                    </div>
                    <div>
                        <img src="img/6-6.gif">
                    </div>
                    <div>
                        <img src="img/6-7.gif">
                    </div>
                    <div>
                        <img src="img/6-8.gif">
                    </div>
                    <div>
                        <img src="img/6-9.gif">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

是不是感覺也並不難啊。

對啊，其實就是六個DIV組成了魔方的六個面，然後每個魔方上面放了九張圖片。

就這樣就簡單的實現了魔方的簡單架構。

是不是對CSS還沒有頭緒，來看下面的CSS程式碼吧，也是很簡單的。

/*定義圖片大小*/
img {
    width: 100px;
    height: 100px;
}

.main {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1
}

.bgimg {
    position: fixed;
    height: 100%;
    width: 100%;
}

.stage {
    width: 300px;
    height: 300px;
    margin: 200px auto 0 auto;
}

.cube div {
    width: 300px;
    height: 300px;
    position: absolute;
    /*border: 1px solid #00F;*/
    /*background-color: rgba(255,200,100,0.5);*/
    display: block;
    border-radius: 5%;
}
/*通過轉換X、Y、Z軸上的角度，實現魔方六個面的位置擺放*/
.cube .one {
    -webkit-transform: translateZ(150px);
    -moz-transform: translateZ(150px);
    -ms-transform: translateZ(150px);
    transform: translateZ(150px);
}

.cube .two {
    -webkit-transform: rotateX(-90deg) translateZ(150px);
    -moz-transform: rotateX(-90deg) translateZ(150px);
    -ms-transform: rotateX(-90deg) translateZ(150px);
    transform: rotateX(-90deg) translateZ(150px);
}

.cube .three {
    -webkit-transform: rotateX(90deg) translateZ(150px);
    -moz-transform: rotateX(90deg) translateZ(150px);
    -ms-transform: rotateX(90deg) translateZ(150px);
    transform: rotateX(90deg) translateZ(150px);
}

.cube .four {
    -webkit-transform: rotateZ(180deg) rotateY(180deg) translateZ(150px);
    -moz-transform: rotateZ(180deg) rotateY(180deg) translateZ(150px);
    -ms-transform: rotateZ(180deg) rotateY(180deg) translateZ(150px);
    transform: rotateZ(180deg) rotateY(180deg) translateZ(150px);
}

.cube .five {
    -webkit-transform: rotateY(-90deg) translateZ(150px);
    -moz-transform: rotateY(-90deg) translateZ(150px);
    -ms-transform: rotateY(-90deg) translateZ(150px);
    transform: rotateY(-90deg) translateZ(150px);
}

.cube .six {
    -webkit-transform: rotateY(90deg) translateZ(150px);
    -moz-transform: rotateY(90deg) translateZ(150px);
    -ms-transform: rotateY(90deg) translateZ(150px);
    transform: rotateY(90deg) translateZ(150px);
}

.one div,
.two div,
.three div,
.four div,
.five div,
.six div {
    width: 100px;
    height: 100px;
    position: absolute;
    /*border: 1px solid #000;*/
    border-radius: 10%;
    /*display: inline-block;*/
}
/*每張圖片位置的確定*/
.cube div div:nth-child(1) {}

.cube div div:nth-child(2) {
    background-image: url(as.jpg);
    left: 100px;
}

.cube div div:nth-child(3) {
    /*background-color: #FF0000;*/
    left: 200px;
}

.cube div div:nth-child(4) {
    /*background-color: #FF6431;*/
    top: 100px;
}

.cube div div:nth-child(5) {
    /*background-color: #15FF31;*/
    top: 100px;
    left: 100px;
}

.cube div div:nth-child(6) {
    /*background-color: #1564FF;*/
    top: 100px;
    left: 200px;
}

.cube div div:nth-child(7) {
    /*background-color: #15F4F5;*/
    top: 200px;
}

.cube div div:nth-child(8) {
    /*background-color: #F56F89;*/
    top: 200px;
    left: 100px;
}

.cube div div:nth-child(9) {
    /*background-color: #1F644F;*/
    top: 200px;
    left: 200px;
}
/*最後最關鍵的旋轉動畫效果來了，
感覺看著有些費勁建議看下CSS3的
transform，animation屬性
*/
.Ani-rotate {
    -webkit-transform-style: preserve-3d;  /*開啟3D檢視，這樣才能看到3D的效果*/
    -webkit-animation: rotate 30s infinite;  /*設定動畫，動畫的名稱，動畫執行時間，動畫執行次數*/
    /*margin: 80px;*/
    /*-webkit-perspective:2000px;*/
    /*-webkit-perspective-origin: -133% 75%;;*/
    -webkit-transform-origin: 150px 150px 0px; /*旋轉中心點，分別為 X、Y、Z軸上的位置*/
    -moz-transform-style: preserve-3d;      /*下面是為了相容更多瀏覽器*/
    -moz-animation: rotate 30s infinite;
    -moz-transform-origin: 150px 150px 0px;
    -ms-transform-style: preserve-3d;
    -ms-animation: rotate 30s infinite;
    -ms-transform-origin: 150px 150px 0px;
    animation: rotate 30s infinite;
    transform-style: preserve-3d;
    transform-origin: 150px 150px 0px;
}
/*下面是動畫的定義，設定不同時間動畫的不同狀態
rotateX、rotateY、rotateZ 為設定在X、Y、Z軸上旋轉的角度
"-"為逆時針旋轉
*/
@-webkit-keyframes rotate {
    from,
    to {}
    15% {
        -webkit-transform: rotateY(-135deg);
    }
    30% {
        -webkit-transform: rotateY(-90deg)rotateZ(135deg); 
    }
    45% {
        -webkit-transform: rotateY(225deg)rotateZ(135deg);
    }
    60% {
        -webkit-transform: rotateY(135deg)rotateX(135deg);
    }
    75% {
        -webkit-transform: rotateX(135deg)rotateY(225deg);
    }
    90% {
        -webkit-transform: rotateX(-135deg);
    }
}

@-moz-keyframes rotate {
    from,
    to {}
    15% {
        -moz-transform: rotateY(-135deg);
    }
    30% {
        -moz-transform: rotateY(-90deg)rotateZ(135deg);
    }
    45% {
        -moz-transform: rotateY(225deg)rotateZ(135deg);
    }
    60% {
        -moz-transform: rotateY(135deg)rotateX(135deg);
    }
    75% {
        -moz-transform: rotateX(135deg)rotateY(225deg);
    }
    90% {
        -moz-transform: rotateX(-135deg);
    }
}

@-ms-keyframes rotate {
    from,
    to {}
    15% {
        -ms-transform: rotateY(-135deg);
    }
    30% {
        -ms-transform: rotateY(-90deg)rotateZ(135deg);
    }
    45% {
        -ms-transform: rotateY(225deg)rotateZ(135deg);
    }
    60% {
        -ms-transform: rotateY(135deg)rotateX(135deg);
    }
    75% {
        -ms-transform: rotateX(135deg)rotateY(225deg);
    }
    90% {
        -ms-transform: rotateX(-135deg);
    }
}

@keyframes rotate {
    from,
    to {}
    15% {
        transform: rotateY(-135deg);
    }
    30% {
        transform: rotateY(-90deg)rotateZ(135deg);
    }
    45% {
        transform: rotateY(225deg)rotateZ(135deg);
    }
    60% {
        transform: rotateY(135deg)rotateX(135deg);
    }
    75% {
        transform: rotateX(135deg)rotateY(225deg);
    }
    90% {
        transform: rotateX(-135deg);
    }
}

對於不瞭解CSS3中的 transform，animation屬性的童鞋估計看著多少還是有點迷糊的，
建議稍微瞭解下 transform，animation 你就猶如恍然大悟，發現原來做這樣一個魔方這麼簡單啊！
希望你們都能做出更炫酷的效果，給你的他/她一個大大的驚喜。

CSS 製作3D魔方愛的魔方給女(男)朋友一個感動

首先上效果圖：是不是很炫呢！沒有？好吧！只能發個大招了，來看下動態的效果吧 http://www.meipai.com/media/395929464 效果還算可以吧，相信只要你用心，你會做出更炫的效果。把你們的生活點滴記錄在上面，你的他/她肯定

用Node+wechaty寫一個爬蟲指令碼每天定時給女(男)朋友發微信暖心話

wechatBot 微信每日說，每日自動傳送微信訊息給你心愛的人專案介紹靈感來源在掘金看到了一篇《用Node + EJS寫一個爬蟲指令碼每天定時女朋友發一封暖心郵件》後，在評論區偶然看到一位讀者說可不可以用微信實現一下。然後最近剛好在做微信機器人的小專案，那就把這個定時任務放到微信上去做吧，說幹就幹，

css實現3D盒子效果

origin fin courier ora 設置 blog select 5% solid -------------------------------------- 用css3的新屬性來設置3D盒子效果（chrome瀏覽器），代碼如下： ---------

介紹css 的3D 變換（3D transform）

default eat remove ots reserve desc too another set https://desandro.github.io/3dtransforms/docs/card-flip.html -------------------------

css之3D變換

場景視角 lex width col ext css doc line 3D變換的x，y，z軸是分別效果是： x軸旋轉的話，就是頭和腳進行轉動 y軸旋轉的話，就是左右手進行轉動 z軸旋轉的話，就是整個身體平鋪在旋轉。上面是針對旋轉的意思去，但是對於其他的類似一樣，就是這

CSS製作簡單的縱向選單

1.先寫一個列表，建立選單的結構 <span style="font-size:14px;"><span style="font-size:14px;"><div class="menu"> <ul> <li&g

CSS製作簡單的橫向選單

1.先寫一個列表，建立選單的結構 <span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><div class="men

純css製作導航下拉選單

轉載文章，覺得作者思路很好 <nav> <ul>

[譯] 使用CSS製作球體

原文連結：cssanimation.rocks/spheres/ 使用border-radius屬性，我們可以實現帶圓角的形狀和圓形。可以新增一些漸變效果來使他們變成圓球。讓我們嘗試一下，並且可以新增一些動畫效果來賦予他們活力。平面設計我們可以通過兩種方式用css來製作圓球。第一種方式是通過使用

css3製作3D立體模型

程式碼跟註釋都在裡面了！想知道是什麼效果不妨自己試試！ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> &l

純CSS製作各種各樣的網頁圖示（三角形、暫停按鈕、下載箭頭、加號等）

三角形 ? 1 2 3 4 5 6 7 8 9 10 11 <div class="box"></div> <style> .box{ &

純CSS製作滑動切換開關

效果演示：程式碼部分： <input type="checkbox" class="toggle"> <div class="inner"> </div> body{ margin:0; height:100

CSS製作各種形狀(矩形、圓形、三角形、多邊形、五角星星、太極陰陽圖......)

CSS能夠製作各種形狀。正方形和矩形很容易，因為它們是自然形狀。新增寬度和高度，就可以獲得所需的確切尺寸矩形。新增border-radius，就可以將這些矩形變成圓形和橢圓形。我們還可以利用CSS中的::before和::after元素，新增到原始元素的形狀，再通過巧妙地定位

CSS製作手風琴式的動畫

<!doctype html> <html> <head> <meta charset="utf-8"> <title>手風琴</title> <style> *{ margin:0px; padding:0px;}

純CSS實現3D照片墻

width jpg mage http tez 藍色 enter -h ccf HTML部分： <body> <div class="photo-wrap">  <div class="

Unity3D之UGUI——利用Camera與RawImage元件製作3D遊戲小地圖

對於場景較大的3D場景遊戲，玩家不能夠全域性觀察自己與敵人的位置以及地圖全貌，因此製作小地圖顯示自己與敵人在地圖上的位置是必要的！現在我就利用一個小的Demo來製作一小地圖，我在製作中查閱了網上資料，製作了一個demo，但是由於只能顯示在我新增在T

css製作tips提示框，氣泡框，製作三角形

有時候我們的頁面會需要這樣的一些提示框或者叫氣泡框，運用css，我們可以實現這樣的效果。為了實現上面的效果，我們首先要理解如何製作三角形。當我們給一個DIV不同顏色的邊框的時候，我們可以得到下面的效果。 .triangle{ border-top

FusionCharts製作3D柱狀圖和折線圖

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <script type="text/javascript" src="static/FusionChar

純css實現3D立方體

純css實現3D立方體特效，通過3D旋轉和平移原理實現，話不多說直接貼程式碼 <html> <head> <style type="text/css"> body,html{ margin: 0;

用jJavaScript製作3D旋轉相簿

原始碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>

CSS 製作3D魔方 愛的魔方給女(男)朋友一個感動

相關推薦

CSS 製作3D魔方愛的魔方給女(男)朋友一個感動