demo-10-立方體

<!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>3D</title>
    <style>
        body {
            margin: 0;
        }
        @keyframes go{
            0%{
                transform: rotate3d(1,1,1,0deg)
            }
            10%{
                transform: rotate3d(1,0,1,243deg)
            }
            20%{
                transform: rotate3d(1,1,0,432deg)
            }
            30%{
                transform: rotate3d(1,1,1,234deg)
            }
            40%{
                transform: rotate3d(0,1,1,342deg)
            }
            50%{
                transform: rotate3d(1,1,1,432deg)
            }
            60%{
                transform: rotate3d(1,0,1,243deg)
            }
            70%{
                transform: rotate3d(0,1,1,240deg)
            }
            80%{
                transform: rotate3d(1,1,0,331deg)
            }
            90%{
                transform: rotate3d(1,0,1,344deg)
            }
            100%{
                transform: rotate3d(1,1,1,0deg)
            }

        }

        div {
            box-sizing: border-box;
        }

        #big {
            width: 100%;
            height: 500px;
            background: rgba(222, 23, 44, 0.1);
            position: relative;
            /* top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto; */
            perspective: 6600px;
            /* 景深      給父元素加景深 子元素才會有3D效果 */
        }

        /* #big:hover #small {
            transform: rotate3d(1, 1, 1, 564deg);
        } */

        #small {
            width: 400px;
            height: 400px;
            animation-name: go;
            animation-duration: 6s;
            animation-timing-function:linear;
            animation-iteration-count: infinite;

            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            transform-style: preserve-3d;
            /* 3d舞臺 */
            /* perspective: 6600px; */
            transform-origin: center center -100px;
            /* background: rgba(66, 66, 66, 0.5); */
            transition: all 2s;
            /* transform:rotate3d(1,1,1,180deg); */
        }

        .small div {
            width: 200px;
            height: 200px;
            opacity: 0.4;
            background: pink;
            text-align: center;
            line-height: 200px;
            position: absolute;

            border:1px solid rgba(33, 33, 33, 0.2);
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(66, 66, 66, 0.5);
            margin: auto;
        }



        .small div:nth-child(1) {

        }


        .small div:nth-child(2) {
            transform-origin: left center;
            transform: rotateY(90deg);
            background: rgba(136, 66, 66, 0.5);
        }


        .small div:nth-child(3) {
            transform-origin: right center;
            transform: rotateY(-90deg);
            background: rgba(66, 232, 66, 0.5);
        }



        .small div:nth-child(4) {
            transform-origin: top center;
            transform: rotateX(-90deg);
            background: rgba(66, 66, 145, 0.5);
        }



        .small div:nth-child(5) {
            transform-origin: bottom center;
            transform: rotateX(90deg);
            background: rgba(122, 122, 122, 0.5);
        }



        .small div:nth-child(6) {
            transform: translateZ(-200px);
            background: rgba(77, 44, 211, 0.5);
            /* opacity: 1; */
        }


        #small .insmall {
            /* background: red; */
            width: 80px;
            height: 80px;
            line-height: 80px;
            perspective: 4400px;
            transform-style: preserve-3d;
            transform: translateZ(-60px);
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            /* transform: rotate() */
            margin: auto;
        }

        .insmall div {
            width: 80px;
            height: 80px;
            position: absolute;
            background: rgba(234, 66, 66, 0.5);
            text-align: center;
            border:1px solid rgba(33, 33, 33, 0.2);
            line-height: 80px;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

        #small .insmall div:nth-child(1) {
            /* transform: translateX(-80px); */
            /* background: red; */
            opacity: 1;
        }

        #small .insmall div:nth-child(2) {
            transform-origin: left center;
            transform: rotateY(90deg);
        }

        #small .insmall div:nth-child(3) {
            transform-origin: right center;
            transform: rotateY(-90deg);
        }

        #small .insmall div:nth-child(4) {
            transform-origin: top center;
            transform: rotateX(-90deg);
        }

        #small .insmall div:nth-child(5) {
            transform-origin: bottom center;
            transform: rotateX(90deg);
        }

        #small .insmall div:nth-child(6) {
            transform: translateZ(-80px);
        }
    </style>
</head>

<body>
    <div id="big">
        <div id="small">
            <div class="small">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>

            <div class="insmall">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>

        </div>
    </div>

</body>

</html>

最后編輯于：2019.06.24 09:35:06

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末旗笔，一起剝皮案震驚了整個濱河市髓堪，隨后出現(xiàn)的幾起案子瑟蜈，更是在濱河造成了極大的恐慌钟哥，老刑警劉巖欠动，帶你破解...
沈念sama閱讀 219,490評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機键俱，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,581評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來世分，“玉大人编振，你說我怎么就攤上這事。” “怎么了踪央？”我有些...
開封第一講書人閱讀 165,830評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵臀玄，是天一觀的道長。經(jīng)常有香客問我畅蹂，道長健无，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,957評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任液斜，我火速辦了婚禮累贤，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘少漆。我一直安慰自己臼膏，他們只是感情好，可當(dāng)我...
茶點故事閱讀 67,974評論 6贊 393
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布示损。她就那樣靜靜地躺著渗磅，像睡著了一般。火紅的嫁衣襯著肌膚如雪检访。梳的紋絲不亂的頭發(fā)上始鱼，一...
開封第一講書人閱讀 51,754評論 1贊 307
城市分裂傳說
那天，我揣著相機與錄音脆贵，去河邊找鬼风响。笑死，一個胖子當(dāng)著我的面吹牛丹禀，可吹牛的內(nèi)容都是我干的状勤。我是一名探鬼主播，決...
沈念sama閱讀 40,464評論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼双泪，長吁一口氣：“原來是場噩夢啊……” “哼持搜！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起焙矛，我...
開封第一講書人閱讀 39,357評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤葫盼，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后村斟，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體贫导，經(jīng)...
沈念sama閱讀 45,847評論 1贊 317
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,995評論 3贊 338
?白月光啟示錄
正文我和宋清朗相戀三年蟆盹，在試婚紗的時候發(fā)現(xiàn)自己被綠了孩灯。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 40,137評論 1贊 351
活死人
序言：一個原本活蹦亂跳的男人離奇死亡逾滥，死狀恐怖峰档，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤讥巡，帶...
沈念sama閱讀 35,819評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布掀亩，位于F島的核電站，受9級特大地震影響欢顷，放射性物質(zhì)發(fā)生泄漏槽棍。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 41,482評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一抬驴、第九天我趴在偏房一處隱蔽的房頂上張望刹泄。院中可真熱鬧，春花似錦怎爵、人聲如沸特石。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,023評論 0贊 22
一樁弒父案鳖链，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽姆蘸。三九已至，卻和暖如春芙委，著一層夾襖步出監(jiān)牢的瞬間逞敷，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,149評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工灌侣，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留推捐，地道東北人。一個月前我還...
沈念sama閱讀 48,409評論 3贊 373
代替公主和親
正文我出身青樓侧啼，卻偏偏與公主長得像牛柒，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子痊乾，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,086評論 2贊 355

demo-10-立方體

推薦閱讀更多精彩內(nèi)容