HTML5和CSS3實現3D轉換效果 CSS3的3D效果

時間 2020-07-09

標籤 html5 html css3 css 實現 3d 轉換效果欄目 HTML5 简体版

原文原文鏈接

　　上次，咱們一塊兒研究了css3的2d模塊，此次咱們一塊兒來看一下css3的3d模塊。css

　　首先，咱們來了解一下3d的座標系，x軸在屏幕上爲水平方向，y軸爲垂直方向，而z軸爲垂直於屏幕的方向。html

　　不理解的話能夠參考定位屬性的z-index屬性，那個在某種意義上就是讓元素在z軸的移動。css3

　　在2d轉換模塊中咱們研究了rotateX()和rotateY()方法，就是繞x軸和y軸旋轉，這其實就是3d模塊的一種表現，固然要看到近大遠小的3d效果，還須要在父元素上添加透視屬性：transform:perspective（500px）;值爲透視點到元素的距離，具體概念請看美術透視教學。。。。多說無益，上代碼：web

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }
        .div1{
            margin-top: 100px;
            transform:perspective(500px) rotatey(0deg);
            position: relative;
            border:1px solid #000000;
            background-color: #ff0000;
        }
        .div1 div{
　　　　　　　transform:rotatey(45deg);

            position: absolute;
            font-size: 80px;
            line-height: 200px;
            text-align: center;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div1_1">1</div>
</div>
</body>

</html>

效果圖：佈局

　　可是，你會發現當父元素轉到90度的時候元素消失了，這就說明元素是沒有厚度的。說明元素雖然具備了近大遠小的透視屬性，但本質上還是2d的。動畫

　　這是你須要添加transform-style:preserve-3d;樣式來讓元素在3d空間中轉換。這樣，元素就處在了3維的空間裏，當父元素旋轉90度，仍能看到裏面的子元素。spa

示例代碼：3d

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }
        .div1{
            margin-top: 100px;
            transform:perspective(500px) rotatey(0deg);
            transform-style:preserve-3d;
            position: relative;
            border:1px solid #000000;
        }
        .div1 div{
            background-color: #ff0000;
            transform:rotatey(45deg);
            position: absolute;
            font-size: 80px;
            line-height: 200px;
            text-align: center;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div1_1">1</div>
</div>
</body>

</html>

效果圖：　　code

　　上面，咱們對3d轉換模塊有了一個初步的瞭解，下面咱們一塊兒作一個正方體，來整理一下3d模塊的知識。orm

　　一步步來作着寫太過麻煩，我就將過程寫在代碼的註釋裏，小夥伴們請見諒。代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轉換模塊-正方體</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(45deg) rotateX(45deg);
        /*旋轉看看效果*/
        transform-style: preserve-3d;
        /*將父元素設置爲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);
        /*將第一個l向左移動100像素，而後繞y軸旋轉90度，造成左邊的面*/
    }
    ul li:nth-child(2){
        background-color: green;
        transform: translateX(100px) rotateY(90deg);
        /*將第一個2向右移動100像素，而後繞y軸旋轉90度*，造成右邊的面*/
    }
    ul li:nth-child(3){
        background-color: blue;
        transform: translateY(-100px) rotateX(90deg);
        /*將第一個3向上移動100像素，而後繞x軸旋轉90度，造成上面的面*/
    }
    ul li:nth-child(4){
        background-color: yellow;
        transform: translateY(100px) rotateX(90deg);
        /*將第一個4向下移動100像素，而後繞x軸旋轉90度*/
    }
    ul li:nth-child(5){
        background-color: purple;
        transform: translateZ(-100px);
        /*將第一個5向後移動100像素，造成後面的面*/
    }
    ul li:nth-child(6){
        background-color: pink;
        transform: translateZ(100px);
        /*將第一個l向前移動100像素，造成前面的面*/
    }

</style>
</head>
<body>
<ul>
    <!--首先作好html佈局，正方體有6個面，因此寫了6個li-->
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
</html>

效果圖：

　　這個方法比較好理解，理解了以後請看下一個，代碼在下面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            /*修改基本樣式*/
        }
        .div1{
            margin-top: 100px;
            transform: perspective(400px) rotatex(0deg) rotatey(0deg);
            /*擁有近大遠小透視效果*/
            transform-style: preserve-3d;
            /*設置爲3d空間*/
            position: relative;
            border:1px solid #000000;
            animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite forwards;
            /*旋轉動畫*/
        }
        .div1 div{
            position: absolute;
            font-size: 80px;
            line-height: 200px;
            text-align: center;
            top: 0;
            left: 0;
            /*內部樣式*/
        }
        .div1_1{
            transform: translatez(100px);
            background-color: red;
            /*向前移動100像素，做爲最前面的面*/
        }
        .div1_2{
            transform: rotatex(90deg) translatez(100px);
            background-color:green;
            /*繞x軸旋轉90度，在z軸正方向移動100像素，做爲上面的面*/
            /*注：旋轉時座標系會跟着一塊兒旋轉，z軸原來是垂直屏幕向外的，繞x軸旋轉90度之後就是在屏幕上向上的方向*/
        }
        .div1_3{
            transform: rotatex(180deg) translatez(100px);
            background-color: blue;
            /*繞x軸旋轉180度，這時z軸垂直屏幕向內，在z軸正方向移動100像素，做爲後面的面*/
        }
        .div1_4{
            transform: rotatex(270deg) translatez(100px);
            background-color: purple;
            /*繞x軸旋轉270度，這時z軸向下，在z軸正方向移動100像素，做爲下面的面*/
        }
        .div1_5{
            transform: rotatey(90deg) translatez(100px);
            background-color: pink;
            /*繞y軸旋轉90度，這時z軸向右，在z軸正方向移動100像素，做爲右面的面*/
        }
        .div1_6{
            transform: rotatey(270deg) translatez(100px);
            background-color: yellow;
            /*繞y軸旋轉90度，這時z軸向左，在z軸正方向移動100像素，做爲左面的面*/
        }
        @-webkit-keyframes xuanzhuan{
            from{
                transform:perspective(400px) rotatex(0deg);
            }
            to{
                transform:perspective(400px) rotatex(360deg);
            }
        }
        .div1:hover{
            transform: perspective(400px) scale(1.5);
            animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite paused forwards;
            /*有hover事件是動畫暫停*/
        }

    </style>
</head>
<body>
<div class="div1">
    <div class="div1_1">1</div>
    <div class="div1_2">2</div>
    <div class="div1_3">3</div>
    <div class="div1_4">4</div>
    <div class="div1_5">5</div>
    <div class="div1_6">6</div>
</div>
<!--html標籤佈局-->
</body>
</html>