欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

怎么利用HTML5+CSS3實(shí)現(xiàn)3D轉(zhuǎn)換效果

這篇文章主要為大家展示了“怎么利用HTML5+CSS3實(shí)現(xiàn)3D轉(zhuǎn)換效果”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“怎么利用HTML5+CSS3實(shí)現(xiàn)3D轉(zhuǎn)換效果”這篇文章吧。

十余年的渝北網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整渝北建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“渝北網(wǎng)站設(shè)計(jì)”,“渝北網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

介紹

首先，我們來(lái)了解一下3d的坐標(biāo)系，x軸在屏幕上為水平方向，y軸為垂直方向，而z軸為垂直于屏幕的方向。

不理解的話可以參考定位屬性的z-index屬性，那個(gè)在某種意義上就是讓元素在z軸的移動(dòng)。

在2d轉(zhuǎn)換模塊中我們研究了rotateX()和rotateY()方法，就是繞x軸和y軸旋轉(zhuǎn)，這其實(shí)就是3d模塊的一種表現(xiàn)，當(dāng)然要看到近大遠(yuǎn)小的3d效果，還需要在父元素上添加透視屬性：transform:perspective（500px）;值為透視點(diǎn)到元素的距離，具體概念請(qǐng)看美術(shù)透視教學(xué)。。。。

多說(shuō)無(wú)益，上代碼：
 

<!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>

效果圖：

怎么利用HTML5+CSS3實(shí)現(xiàn)3D轉(zhuǎn)換效果 

但是，你會(huì)發(fā)現(xiàn)當(dāng)父元素轉(zhuǎn)到90度的時(shí)候元素消失了，這就說(shuō)明元素是沒(méi)有厚度的。說(shuō)明元素雖然具有了近大遠(yuǎn)小的透視屬性，但本質(zhì)上仍是2d的。

這是你需要添加transform-style:preserve-3d;樣式來(lái)讓元素在3d空間中轉(zhuǎn)換。這樣，元素就處在了3維的空間里，當(dāng)父元素旋轉(zhuǎn)90度，仍能看到里面的子元素。

示例代碼：
 

<!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>

效果圖：

怎么利用HTML5+CSS3實(shí)現(xiàn)3D轉(zhuǎn)換效果

上面，我們對(duì)3d轉(zhuǎn)換模塊有了一個(gè)初步的了解，下面我們一起做一個(gè)正方體，來(lái)整理一下3d模塊的知識(shí)。

一步步來(lái)做著寫(xiě)太過(guò)麻煩，我就將過(guò)程寫(xiě)在代碼的注釋里，小伙伴們請(qǐng)見(jiàn)諒。

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轉(zhuǎn)換模塊-正方體</title>
    <style>

    *{
        margin: 0;
        padding: 0;
        /*去除默認(rèn)邊距*/
    }

    ul{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        box-sizing: border-box;
        margin: 100px auto;
        position: relative;
        /*修改基本樣式*/
        transform: rotateY(45deg) rotateX(45deg);
        /*旋轉(zhuǎn)看看效果*/
        transform-style: preserve-3d;
        /*將父元素設(shè)置為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);
        /*將第一個(gè)l向左移動(dòng)100像素，然后繞y軸旋轉(zhuǎn)90度，形成左邊的面*/
    }
    ul li:nth-child(2){
        background-color: green;
        transform: translateX(100px) rotateY(90deg);
        /*將第一個(gè)2向右移動(dòng)100像素，然后繞y軸旋轉(zhuǎn)90度*，形成右邊的面*/
    }
    ul li:nth-child(3){
        background-color: blue;
        transform: translateY(-100px) rotateX(90deg);
        /*將第一個(gè)3向上移動(dòng)100像素，然后繞x軸旋轉(zhuǎn)90度，形成上面的面*/
    }
    ul li:nth-child(4){
        background-color: yellow;
        transform: translateY(100px) rotateX(90deg);
        /*將第一個(gè)4向下移動(dòng)100像素，然后繞x軸旋轉(zhuǎn)90度*/
    }
    ul li:nth-child(5){
        background-color: purple;
        transform: translateZ(-100px);
        /*將第一個(gè)5向后移動(dòng)100像素，形成后面的面*/
    }
    ul li:nth-child(6){
        background-color: pink;
        transform: translateZ(100px);
        /*將第一個(gè)l向前移動(dòng)100像素，形成前面的面*/
    }

</style>
</head>
<body>
<ul>
    <!--首先做好html布局，正方體有6個(gè)面，所以寫(xiě)了6個(gè)li-->
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
</html>

效果圖：

怎么利用HTML5+CSS3實(shí)現(xiàn)3D轉(zhuǎn)換效果

這個(gè)方法比較好理解，理解了之后請(qǐng)看下一個(gè)。

代碼在下面：

<!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);
            /*擁有近大遠(yuǎn)小透視效果*/
            transform-style: preserve-3d;
            /*設(shè)置為3d空間*/
            position: relative;
            border:1px solid #000000;
            animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite forwards;
            /*旋轉(zhuǎn)動(dòng)畫(huà)*/
        }
        .div1 div{
            position: absolute;
            font-size: 80px;
            line-height: 200px;
            text-align: center;
            top: 0;
            left: 0;
            /*內(nèi)部樣式*/
        }
        .div1_1{
            transform: translatez(100px);
            background-color: red;
            /*向前移動(dòng)100像素，作為最前面的面*/
        }
        .div1_2{
            transform: rotatex(90deg) translatez(100px);
            background-color:green;
            /*繞x軸旋轉(zhuǎn)90度，在z軸正方向移動(dòng)100像素，作為上面的面*/
            /*注：旋轉(zhuǎn)時(shí)坐標(biāo)系會(huì)跟著一起旋轉(zhuǎn)，z軸原來(lái)是垂直屏幕向外的，繞x軸旋轉(zhuǎn)90度以后就是在屏幕上向上的方向*/
        }
        .div1_3{
            transform: rotatex(180deg) translatez(100px);
            background-color: blue;
            /*繞x軸旋轉(zhuǎn)180度，這時(shí)z軸垂直屏幕向內(nèi)，在z軸正方向移動(dòng)100像素，作為后面的面*/
        }
        .div1_4{
            transform: rotatex(270deg) translatez(100px);
            background-color: purple;
            /*繞x軸旋轉(zhuǎn)270度，這時(shí)z軸向下，在z軸正方向移動(dòng)100像素，作為下面的面*/
        }
        .div1_5{
            transform: rotatey(90deg) translatez(100px);
            background-color: pink;
            /*繞y軸旋轉(zhuǎn)90度，這時(shí)z軸向右，在z軸正方向移動(dòng)100像素，作為右面的面*/
        }
        .div1_6{
            transform: rotatey(270deg) translatez(100px);
            background-color: yellow;
            /*繞y軸旋轉(zhuǎn)90度，這時(shí)z軸向左，在z軸正方向移動(dòng)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事件是動(dòng)畫(huà)暫停*/
        }

    </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標(biāo)簽布局-->
</body>
</html>

效果圖：

怎么利用HTML5+CSS3實(shí)現(xiàn)3D轉(zhuǎn)換效果

這種寫(xiě)法只要理解了，寫(xiě)起來(lái)會(huì)更加的方便，而且不不用去考慮轉(zhuǎn)換的角度不對(duì)會(huì)導(dǎo)致內(nèi)容是反的，所以推薦這一種寫(xiě)法。當(dāng)然這種寫(xiě)法在x軸和y軸一起旋轉(zhuǎn)是也會(huì)造成內(nèi)容的反轉(zhuǎn)。

以上是“怎么利用HTML5+CSS3實(shí)現(xiàn)3D轉(zhuǎn)換效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁(yè)名稱：怎么利用HTML5+CSS3實(shí)現(xiàn)3D轉(zhuǎn)換效果
分享路徑：http://chinadenli.net/article12/jdpdgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、品牌網(wǎng)站制作、域名注冊(cè)、網(wǎng)站維護(hù)、手機(jī)網(wǎng)站建設(shè)、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營(yíng)