簡單說用CSS作一個魔方旋轉的效果

時間 2019-11-07

標籤簡單 css 一個旋轉效果欄目 CSS 简体版

原文原文鏈接

說明

魔方你們應該是不會陌生的，此次咱們來一塊兒用CSS實現一個魔方旋轉的特效，先來看看效果圖！ css

解釋

咱們要作這樣的效果，重點在於怎麼把6張圖片，擺放成魔方的樣子，而把它們擺放成魔方的樣子，重點在於用好CSS的transform，這是很是重要的，好的，咱們先拼出一個魔方的樣子。
效果圖 html

代碼（代碼比較長，朋友們能夠直接粘貼複製到電腦看效果）css3

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        /*最外層容器樣式*/
        .wrap {
            width: 200px;
            height: 200px;
            margin: 200px;
            position: relative;
        }

        /*包裹全部容器樣式*/
        .cube {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            transform-style: preserve-3d;
            /* 爲了方便觀察，將整個魔方進行旋轉 */
            transform: rotateX(-30deg) rotateY(-80deg);
        }

        .cube div {
            position: absolute;
            width: 200px;
            height: 200px;
            opacity: 0.8;
            transition: .4s;
        }

        /*定義全部圖片樣式*/
        .pic {
            width: 200px;
            height: 200px;
        }

        .cube .out_front {
            transform: rotateY(0deg) translateZ(100px);
        }

        .cube .out_back {
            transform: translateZ(-100px) rotateY(180deg);
        }

        .cube .out_left {
            transform: rotateY(-90deg) translateZ(100px);
        }

        .cube .out_right {
            transform: rotateY(90deg) translateZ(100px);
        }

        .cube .out_top {
            transform: rotateX(90deg) translateZ(100px);
        }

        .cube .out_bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }

        /*鼠標移入後樣式*/
        .cube:hover .out_front {
            transform: rotateY(0deg) translateZ(200px);
        }

        .cube:hover .out_back {
            transform: translateZ(-200px) rotateY(180deg);
        }

        .cube:hover .out_left {
            transform: rotateY(-90deg) translateZ(200px);
        }

        .cube:hover .out_right {
            transform: rotateY(90deg) translateZ(200px);
        }

        .cube:hover .out_top {
            transform: rotateX(90deg) translateZ(200px);
        }

        .cube:hover .out_bottom {
            transform: rotateX(-90deg) translateZ(200px);
        }
    </style>
</head>

<body>
    <!--外層最大容器-->
    <div class="wrap">
        <!--包裹全部元素的容器-->
        <div class="cube">
            <!--前面圖片 -->
            <div class="out_front">
                <img src="http://img.blog.csdn.net/20170716094246620" class="pic" />
            </div>
            <!--後面圖片 -->
            <div class="out_back">
                <img src="http://img.blog.csdn.net/20170716094334594" class="pic" />
            </div>
            <!--左面圖片 -->
            <div class="out_left">
                <img src="http://img.blog.csdn.net/20170716094400013" class="pic" />
            </div>
            <!--右面圖片 -->
            <div class="out_right">
                <img src="http://img.blog.csdn.net/20170716094422331" class="pic" />
            </div>
            <!--上面圖片 -->
            <div class="out_top">
                <img src="http://img.blog.csdn.net/20170716094444434" class="pic" />
            </div>
            <!--下面圖片 -->
            <div class="out_bottom">
                <img src="http://img.blog.csdn.net/20170716094504432" class="pic" />
            </div>
        </div>
    </div>
</body>

</html>

咱們來分析一下上面的代碼
先說結構部分，看圖 web

咱們繼續說CSS部分，主要是下面這4部分，咱們說說每一個部分中比較重要的
一、最外層容器樣式
position: relative; ，主要是由於後面會用到position: absolute;動畫

absolute，生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。

二、包裹全部容器樣式
transform-style: preserve-3d;
使被轉換的子元素保留其 3D 轉換：
參考連接 http://www.runoob.com/cssref/...spa

三、定義全部圖片樣式
position: absolute;
讓每一個面先在同一個位置，方便後面轉換位置
效果圖 .net

Transform字面上就是變形，改變的意思。在CSS3中transform主要包括如下幾種：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。

上下兩個面沿X軸旋轉必定角度，沿Z軸位移必定像素。
先後左右四個面沿Y軸旋轉必定角度，沿Z軸位移必定像素。
注意，後面是先位移，再旋轉，其餘面是先旋轉，再位移，千萬別弄錯順序。 ssr

四、鼠標移入後樣式
只是改變translateZ的值，將位移的距離再增長100px 3d

到此，咱們就弄出一個魔方了，至於最開始咱們看到的魔方中還有嵌套一個小魔方，就很容易了，把這個魔方的六個面複製一下，而後粘貼到cube中，而後改變大小，和位移的距離就能夠了，要讓整個魔方動起來，就在最外面的容器（cube）上，加上動畫就能夠了。code

總結

作這樣的一個效果，主要是爲了練習，transform，這個效果重點就是搞明白每一個面要旋轉多少度，而後位移的距離是同樣的（不是說取值是同樣的），明白了以後，作這個效果就很簡單了，下方有完整的代碼！須要的朋友就CV吧！

完整示例代碼

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        /*最外層容器樣式*/
        .wrap {
            width: 200px;
            height: 200px;
            margin: 200px;
            position: relative;
        }

        /*包裹全部容器樣式*/
        .cube {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            transform-style: preserve-3d;
            transform: rotateX(-30deg) rotateY(-80deg);
            animation: rotate linear 20s infinite;
        }

        @-webkit-keyframes rotate {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        .cube div {
            position: absolute;
            width: 200px;
            height: 200px;
            opacity: 0.8;
            transition: all .4s;
        }

        /*定義全部圖片樣式*/
        .pic {
            width: 200px;
            height: 200px;
        }

        .cube .out_front {
            transform: rotateY(0deg) translateZ(100px);
        }

        .cube .out_back {
            transform: translateZ(-100px) rotateY(180deg);
        }

        .cube .out_left {
            transform: rotateY(-90deg) translateZ(100px);
        }

        .cube .out_right {
            transform: rotateY(90deg) translateZ(100px);
        }

        .cube .out_top {
            transform: rotateX(90deg) translateZ(100px);
        }

        .cube .out_bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }

        /*定義小正方體樣式*/
        .cube span {
            display: block;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
        }

        .cube .in_pic {
            width: 100px;
            height: 100px;
        }

        .cube .in_front {
            transform: rotateY(0deg) translateZ(50px);
        }

        .cube .in_back {
            transform: translateZ(-50px) rotateY(180deg);
        }

        .cube .in_left {
            transform: rotateY(-90deg) translateZ(50px);
        }

        .cube .in_right {
            transform: rotateY(90deg) translateZ(50px);
        }

        .cube .in_top {
            transform: rotateX(90deg) translateZ(50px);
        }

        .cube .in_bottom {
            transform: rotateX(-90deg) translateZ(50px);
        }

        /*鼠標移入後樣式*/
        .cube:hover .out_front {
            transform: rotateY(0deg) translateZ(200px);
        }

        .cube:hover .out_back {
            transform: translateZ(-200px) rotateY(180deg);
        }

        .cube:hover .out_left {
            transform: rotateY(-90deg) translateZ(200px);
        }

        .cube:hover .out_right {
            transform: rotateY(90deg) translateZ(200px);
        }

        .cube:hover .out_top {
            transform: rotateX(90deg) translateZ(200px);
        }

        .cube:hover .out_bottom {
            transform: rotateX(-90deg) translateZ(200px);
        }
    </style>
</head>

<body>
    <!-- 外層最大容器 -->
    <div class="wrap">
        <!--包裹全部元素的容器-->
        <div class="cube">
            <!--前面圖片 -->
            <div class="out_front">
                <img src="http://img.blog.csdn.net/20170716094246620" class="pic" />
            </div>
            <!--後面圖片 -->
            <div class="out_back">
                <img src="http://img.blog.csdn.net/20170716094334594" class="pic" />
            </div>
            <!--左面圖片 -->
            <div class="out_left">
                <img src="http://img.blog.csdn.net/20170716094400013" class="pic" />
            </div>
            <!--右面圖片 -->
            <div class="out_right">
                <img src="http://img.blog.csdn.net/20170716094422331" class="pic" />
            </div>
            <!--上面圖片 -->
            <div class="out_top">
                <img src="http://img.blog.csdn.net/20170716094444434" class="pic" />
            </div>
            <!--下面圖片 -->
            <div class="out_bottom">
                <img src="http://img.blog.csdn.net/20170716094504432" class="pic" />
            </div>

            <!--小正方體 -->
            <span class="in_front">
                <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />
            </span>
            <span class="in_back">
                 <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />
            </span>
            <span class="in_left">
                <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />
            </span>
            <span class="in_right">
                <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />
            </span>
            <span class="in_top">
                <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />
            </span>
            <span class="in_bottom">
                <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />
            </span>
        </div>

    </div>
</body>

</html>