CSS3之3D立方體效果

時間 2019-12-04

標籤 css3 css 3d 立方體效果欄目 CSS 简体版

原文原文鏈接

下面代碼可實現3D立方體，比較好理解，就是讓每一個面先平移到指定位置，而後旋轉90度html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D轉換模塊-正方體</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        box-sizing: border-box;
        margin: 100px auto;
        position: relative;
        transform: rotateY(0deg) rotateX(0deg);
        transform-style: preserve-3d;
    }
    ul li{
        list-style: none;
        width: 200px;
        height: 200px;
        font-size: 60px;
        text-align: center;
        line-height: 200px;
        position: absolute;
        left: 0;
        top: 0;
    }
    ul li:nth-child(1){
        background-color: red;
        transform: translateX(-100px) rotateY(90deg);
    }
    ul li:nth-child(2){
        background-color: green;
        transform: translateX(100px) rotateY(90deg);
    }
    ul li:nth-child(3){
        background-color: blue;
        transform: translateY(-100px) rotateX(90deg);
    }
    ul li:nth-child(4){
        background-color: yellow;
        transform: translateY(100px) rotateX(90deg);
    }
    ul li:nth-child(5){
        background-color: purple;
        transform: translateZ(-100px);
    }
    ul li:nth-child(6){
        background-color: pink;
        transform: translateZ(100px);
    }

</style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
</html>

可是缺點是若是咱們旋轉每一個面面對本身的時候，裏面的數字可能並非正序的，如圖：spa

這裏的5就是反的，爲了解決這個問題，咱們須要作的是針對上，後，下，前四個面進行先旋轉在平移的處理，就能夠保證轉向咱們的面始終是正序的3d

代碼以下：code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D轉換模塊-正方體終極</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            box-sizing: border-box;
            margin: 100px auto;
            position: relative;
            transform: rotateY(0deg) rotateX(0deg);
            transform-style: preserve-3d;
        }
        ul li{
            list-style: none;
            width: 200px;
            height: 200px;
            font-size: 60px;
            text-align: center;
            line-height: 200px;
            position: absolute;
            left: 0;
            top: 0;
        }
        /*上面*/
        ul li:nth-child(1){
            background-color: red;
            transform: rotateX(90deg) translateZ(100px);
        }
        /*後面*/
        ul li:nth-child(2){
            background-color: green;
            transform: rotateX(180deg) translateZ(100px);
        }
        /*下面*/
        ul li:nth-child(3){
            background-color: blue;
            transform: rotateX(270deg) translateZ(100px);
        }
        /*
        前面*/
        ul li:nth-child(4){
            background-color: yellow;
            transform: rotateX(360deg) translateZ(100px);
        }
        /*
        左面
        */
        ul li:nth-child(5){
            background-color: purple;
            transform: translateX(-100px) rotateY(90deg);
        }
        /*
        右面
        */
        ul li:nth-child(6){
            background-color: pink;
            transform: translateX(100px) rotateY(90deg);
        }

    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
</html>

若是實現旋轉效果，就須要加上CSS3中的animation屬性，代碼以下：orm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>110-3D轉換模塊-練習</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            /*想看到整個立方的近大遠小效果, 就給ul的父元素添加透視*/

            perspective: 500px;
            
        }
        ul{
            width: 200px;
            height: 200px;
            box-sizing: border-box;
            margin: 100px auto;
            position: relative;
            transform: rotateY(0deg) rotateX(0deg);
            transform-style: preserve-3d;
            animation: sport 5s linear 0s infinite normal;
        }
        ul li{
            list-style: none;
            width: 200px;
            height: 200px;
            font-size: 60px;
            text-align: center;
            line-height: 200px;
            position: absolute;
            left: 0;
            top: 0;
        }
        ul li:nth-child(1){
            background-color: red;
            transform: rotateX(90deg) translateZ(100px) scale(2, 1);
        }
        ul li:nth-child(2){
            background-color: green;
            transform: rotateX(180deg) translateZ(100px) scale(2, 1);
        }
        ul li:nth-child(3){
            background-color: blue;
            transform: rotateX(270deg) translateZ(100px) scale(2, 1);
        }
        ul li:nth-child(4){
            background-color: yellow;
            transform: rotateX(360deg) translateZ(100px) scale(2, 1);
        }
        ul li:nth-child(5){
            background-color: purple;
            transform: translateX(-200px) rotateY(90deg);
        }
        ul li:nth-child(6){
            background-color: pink;
            transform: translateX(200px) rotateY(90deg);
        }
        ul li img{
            /*
            注意點:
            只要父元素被拉伸了,子元素也會被拉伸
            */
            width: 200px;
            height: 200px;
        }
        @keyframes sport {
            from{
                transform: rotateX(0deg);
            }
            to{
                transform: rotateX(360deg);
            }
        }
    </style>
</head>
<body>
<ul>
    <li><img src="images/banner11.jpg" alt=""></li>
    <li><img src="images/banner21.jpg" alt=""></li>
    <li><img src="images/banner31.jpg" alt=""></li>
    <li><img src="images/banner41.jpg" alt=""></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。