CSS3實(shí)現(xiàn)3D動(dòng)畫

mtunique 發(fā)布于2019-08-30 11:10 / 2321人閱讀

摘要：這是動(dòng)畫必備的屬性，如果不添加這個(gè)屬性，則動(dòng)畫會(huì)變成平面效果。最主要的就是知道自己的動(dòng)畫層次，頭腦清晰的去部署完成動(dòng)畫需要的一切。

本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于css實(shí)現(xiàn)3d動(dòng)畫特效的代碼實(shí)例，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助！

一、動(dòng)畫屬性

1.transform-style: flat | preserve-3d 動(dòng)畫的形式

flat：默認(rèn)值平面，也就是沒(méi)有3d效果

preserve-3d：3d效果展示

如果要用3D表現(xiàn)，這個(gè)屬性是必須啟用的，當(dāng)然注意屬性要加各種前綴。

（這個(gè)屬性可以把一個(gè)處于2維的div變?yōu)?d空間，把這個(gè)屬性比作一個(gè)相機(jī)的攝像頭,這個(gè)div內(nèi)的內(nèi)容會(huì)以3d的形式通過(guò)攝像頭的形式反饋給你,他的子元素才會(huì)享受3d效果,子元素以下的元素就不會(huì)有3d效果。）

2.transform-origin：50% 50%;

旋轉(zhuǎn)移動(dòng)圍繞的軸線,默認(rèn)是中心,可以設(shè)left,right,top,bottom,也可以設(shè)值數(shù)值，這樣可以調(diào)整旋轉(zhuǎn)移動(dòng)所圍繞的軸線，完成諸如翻頁(yè)，開門等動(dòng)作。

(這就相當(dāng)于你的眼鏡啦,位置不同效果也就不同了)

3.perspective 視角

值越小，透視距離越近，效果越明顯

該屬性為定義3D變換的元素與視圖的距離，也就是透視距離。這個(gè)屬性應(yīng)添加到視圖元素(變換元素的父元素)上。

這是3d動(dòng)畫必備的屬性，如果不添加這個(gè)屬性，則動(dòng)畫會(huì)變成平面效果。

一般用在舞臺(tái)元素也就是容器上，這樣會(huì)讓該容器中所用動(dòng)畫元素使用一個(gè)視角，這個(gè)屬性還可以多帶帶用在每個(gè)元素中，自然元素也就只呈現(xiàn)自己的視角樣式。

4.backface-visibility：hidden 是否隱藏元素背面

二、動(dòng)畫實(shí)現(xiàn)

下面我用部分代碼實(shí)際闡述一下3D效果的實(shí)現(xiàn)。

1.卡片翻轉(zhuǎn)

html

css

效果

2.立方體

html

css

    .box{
        width: 500px;
        height: 500px;
        margin: 50px auto;
        border: 1px solid;
        perspective: 3000px;
        perspective-origin: -90% -160%;
    }
    .box ul{
        width: 100px;
        height: 100px;
        position: relative;
        top: 200px;
        margin: 0 auto;
        transform-style:preserve-3d;
    }
    .box ul li{
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-size: 25px;
        color: white;
        position: absolute;
        background: rgba(225,0,0,0.2);
        border: 1px solid black;
        transition: all 1s linear;
    }
    /*上面*/
    li:nth-child(1){
        transform: translateY(-50px) rotateX(90deg);
    }
    .box ul:hover li:nth-child(1){
        transform: translateY(-100px) rotateX(90deg);
        background: palevioletred;
        border: 0;
        border-radius: 50%;
    }
    /*后面*/
    li:nth-child(2){
        transform: translateX(50px) rotateY(90deg);
    }
    .box ul:hover li:nth-child(2){
        transform: translateX(100px) rotateY(90deg);
        background: #92ecae;
        border: 0;
        border-radius: 50%;
    }
    /*下面*/
    li:nth-child(3){
        transform: translateY(50px) rotateX(90deg);
    }
    .box ul:hover li:nth-child(3){
        transform: translateY(100px) rotateX(90deg);
        background: #ff916a;
        border: 0;
        border-radius: 50%;
    }
    /*左面*/
    li:nth-child(4){
        transform: translateX(-50px) rotateY(90deg);
    }
    .box ul:hover li:nth-child(4){
        transform: translateX(-100px) rotateY(90deg);
        background: greenyellow;
        border: 0;
        border-radius: 50%;
    }
    /*右面*/
    li:nth-child(5){
        transform: translateZ(-50px);
    }
    .box ul:hover li:nth-child(5){
        transform: translateZ(-100px);
        background: lightskyblue;
        border: 0;
        border-radius: 50%;
    }
    /*正面*/
    li:nth-child(6){
        transform: translateZ(50px);
    }
    .box ul:hover li:nth-child(6){
        transform: translateZ(100px);
        background: #be46d8;
        border: 0;
        border-radius: 50%;
    }
    .box ul:hover{
        transform: rotateX(9000deg) rotateY(5000deg);
        transition: all 100s linear;
    }

效果

3.長(zhǎng)方體

html

css

    *{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .wutai{
        width: 900px;
        height: 600px;
        border: 1px solid;
        margin: 0 auto;
        perspective: 1000px;
        perspective-origin: 50% 1%;
    }
    .wutai ul{
        width: 100px;
        height: 300px;
        position: relative;
        margin: 0 auto;
        top: 150px;
        transform-style:preserve-3d;
    }
    .wutai:hover ul{
        transform: rotateY(36000000deg);
        transition: all 1000000s linear;
    }
    .wutai li{
        width: 100px;
        height: 300px;
        position: absolute;
        text-align: center;
        line-height: 300px;
        font-size: 30px;
        color: white;
    }
    li:nth-child(1){
        background: rgba(255,0,0,0.6);
        transform: rotateY(30deg) translateZ(200px);
    }
    li:nth-child(2){
        background: rgba(0,255,0,0.6);
        transform: rotateY(60deg) translateZ(200px);
    }
    li:nth-child(3){
        background: rgba(225,225,0,0.6);
        transform: rotateY(90deg) translateZ(200px);
    }
    li:nth-child(4){
        background: rgba(225,0,225,0.6);
        transform: rotateY(120deg) translateZ(200px);
    }
    li:nth-child(5){
        background: rgba(0,225,225,0.6);
        transform: rotateY(150deg) translateZ(200px);
    }
    li:nth-child(6){
        background: rgba(225,0,0,0.6);
        transform: rotateY(180deg) translateZ(200px);
    }
    li:nth-child(7){
        background: rgba(225,0,225,0.6);
        transform: rotateY(210deg) translateZ(200px);
    }
    li:nth-child(8){
        background: rgba(0,0,225,0.6);
        transform: rotateY(240deg) translateZ(200px);
    }
    li:nth-child(9){
        background: rgba(0,225,225,0.6);
        transform: rotateY(270deg) translateZ(200px);
    }
    li:nth-child(10){
        background: rgba(225,225,0,0.6);
        transform: rotateY(300deg) translateZ(200px);
    }
    li:nth-child(11){
        background: rgba(225,0,225,0.6);
        transform: rotateY(330deg) translateZ(200px);
    }
    li:nth-child(12){
        background: rgba(0,225,225,0.6);
        transform: rotateY(360deg) translateZ(200px);
    }

效果

4.圖片旋轉(zhuǎn)

html

css

效果

小結(jié)：

總的來(lái)說(shuō)，主要就是配合使用各個(gè)動(dòng)畫屬性，分清楚自己要寫的主容器和動(dòng)畫元素，可以使用定時(shí)器來(lái)幫助加載各種類樣式。最主要的就是：知道自己的動(dòng)畫層次，頭腦清晰的去部署完成動(dòng)畫需要的一切。

如果大家覺(jué)得我的文章寫的還不錯(cuò)的話，就關(guān)注收藏一下哦！

3D動(dòng)畫更多源碼在這里哦有興趣的朋友可以參考一下！

https://liyingyingweb.github....

GPU云服務(wù)器云服務(wù)器 css3d css3動(dòng)畫高性能css3動(dòng)畫 html3d動(dòng)畫插件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114816.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

mtunique

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

構(gòu)建多云戰(zhàn)略的注意事項(xiàng)

閱讀 610·2021-11-18 13:12
【機(jī)器學(xué)習(xí)】回歸算法-精講

閱讀 1328·2021-11-15 11:39
機(jī)器人攻擊數(shù)量同比增長(zhǎng)41%，人為發(fā)起攻擊下降29%

閱讀 2488·2021-09-23 11:22
買了主機(jī)還要什么-電腦主機(jī)應(yīng)該怎么買？

閱讀 6223·2021-09-22 15:15
速云：495元/月/4核/4GB內(nèi)存/50GB SSD空間/不限流量/500Mbps-1Gbps端口

閱讀 3670·2021-09-02 09:54
CSS3實(shí)現(xiàn)3D動(dòng)畫

閱讀 2322·2019-08-30 11:10
H5 頁(yè)面 rem 布局適配方法

閱讀 3254·2019-08-29 14:13
終于找到一種有效的垂直居中方法

閱讀 2919·2019-08-29 12:49

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

CSS3實(shí)現(xiàn)3D動(dòng)畫

相關(guān)文章

***CSS3-Animotion抽絲剝繭一步步擼出跑男動(dòng)畫***

***CSS3-Animotion抽絲剝繭一步步擼出跑男動(dòng)畫***

***CSS3-Animotion抽絲剝繭一步步擼出跑男動(dòng)畫***

***css3實(shí)現(xiàn)顫動(dòng)的動(dòng)畫***

發(fā)表評(píng)論

0條評(píng)論

mtunique

男|高級(jí)講師

TA的文章

構(gòu)建多云戰(zhàn)略的注意事項(xiàng)

【機(jī)器學(xué)習(xí)】回歸算法-精講

機(jī)器人攻擊數(shù)量同比增長(zhǎng)41%，人為發(fā)起攻擊下降29%

買了主機(jī)還要什么-電腦主機(jī)應(yīng)該怎么買？

速云：495元/月/4核/4GB內(nèi)存/50GB SSD空間/不限流量/500Mbps-1Gbps端口