首頁  >  文章  >  web前端  >  實例詳解HTML5、CSS3實現3D轉換效果

實例詳解HTML5、CSS3實現3D轉換效果

小云云
小云云原創
2017-12-19 11:33:012992瀏覽

在css二維的世界裡,我們可以對元素設定寬高、位置、旋轉、背景等等。在css三維世界裡,擴展出了一個z軸,這個z軸垂直於螢幕並指向外面。以下這篇文章主要跟大家介紹了利用HTML5+CSS3實現3D轉換效果的相關資料,需要的朋友可以參考,希望能幫助大家。

首先,我們來了解3d的座標系,x軸在螢幕上為水平方向,y軸為垂直方向,而z軸為垂直於螢幕的方向。

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

在2d轉換模組中我們研究了rotateX()和rotateY()方法,就是繞x軸和y軸旋轉,這其實就是3d模組的一種表現,當然要看到近大遠小的3d效果,還需要在父元素上加入透視屬性:transform:perspective(500px);值為透視點到元素的距離,具體概念請看美術透視教學。 。 。 。

多說無益,上碼:
 

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

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

</html>

效果圖:

 

但是,你會發現當父元素轉到90度的時候元素消失了,這表示元素是沒有厚度的。說明元素雖然具有了近大遠小的透視屬性,但本質上仍是2d的。

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

範例程式碼:
 

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

</html>

效果圖:  

  

上面,我們對3d轉換模組有了初步的了解,下面我們一起做一個立方體,來整理一下3d模組的知識。

一步步來做著寫太過麻煩,我就將過程寫在程式碼的註解裡,小夥伴們請見諒。

程式碼:

<!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>
        p{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            /*修改基本样式*/
        }
        .p1{
            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;
            /*旋转动画*/
        }
        .p1 p{
            position: absolute;
            font-size: 80px;
            line-height: 200px;
            text-align: center;
            top: 0;
            left: 0;
            /*内部样式*/
        }
        .p1_1{
            transform: translatez(100px);
            background-color: red;
            /*向前移动100像素,作为最前面的面*/
        }
        .p1_2{
            transform: rotatex(90deg) translatez(100px);
            background-color:green;
            /*绕x轴旋转90度,在z轴正方向移动100像素,作为上面的面*/
            /*注:旋转时坐标系会跟着一起旋转,z轴原来是垂直屏幕向外的,绕x轴旋转90度以后就是在屏幕上向上的方向*/
        }
        .p1_3{
            transform: rotatex(180deg) translatez(100px);
            background-color: blue;
            /*绕x轴旋转180度,这时z轴垂直屏幕向内,在z轴正方向移动100像素,作为后面的面*/
        }
        .p1_4{
            transform: rotatex(270deg) translatez(100px);
            background-color: purple;
            /*绕x轴旋转270度,这时z轴向下,在z轴正方向移动100像素,作为下面的面*/
        }
        .p1_5{
            transform: rotatey(90deg) translatez(100px);
            background-color: pink;
            /*绕y轴旋转90度,这时z轴向右,在z轴正方向移动100像素,作为右面的面*/
        }
        .p1_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);
            }
        }
        .p1: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>
<p class="p1">
    <p class="p1_1">1</p>
    <p class="p1_2">2</p>
    <p class="p1_3">3</p>
    <p class="p1_4">4</p>
    <p class="p1_5">5</p>
    <p class="p1_6">6</p>
</p>
<!--html标签布局-->
</body>
</html>

效果圖:

#這種寫法只要理解了,寫起來會更加的方便,而且不不用考慮轉換的角度不對會導致內容是反的,所以推薦這一種寫法。當然這種寫法在x軸和y軸一起旋轉是也會造成內容的反轉。

相關推薦:

HTML如何2d與3d轉換

#css3動畫2D、3D轉換的方法

#CSS3的3D轉換效果詳解介紹_html/css_WEB-ITnose

以上是實例詳解HTML5、CSS3實現3D轉換效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn