CSS3實現3D動畫

時間 2019-12-05

標籤 css3 css 實現 3d 動畫欄目 CSS 简体版

原文原文鏈接

本篇文章給你們帶來的內容是關於css實現3d動畫特效的代碼實例，有必定的參考價值，有須要的朋友能夠參考一下，但願對你有所幫助！

1、動畫屬性css

1.transform-style: flat | preserve-3d 動畫的形式html

flat：默認值平面，也就是沒有3d效果前端

preserve-3d：3d效果展現git

若是要用3D表現，這個屬性是必須啓用的，固然注意屬性要加各類前綴。github

（這個屬性能夠把一個處於2維的div變爲3d空間，把這個屬性比做一個相機的攝像頭,這個div內的內容會以3d的形式經過攝像頭的形式反饋給你,他的子元素纔會享受3d效果,子元素如下的元素就不會有3d效果。）web

2.transform-origin：50% 50%;動畫

旋轉移動圍繞的軸線,默認是中心,能夠設left,right,top,bottom,也能夠設值數值，這樣能夠調整旋轉移動所圍繞的軸線，完成諸如翻頁，開門等動做。spa

(這就至關於你的眼鏡啦,位置不一樣效果也就不一樣了)3d

3.perspective 視角code

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

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

這是3d動畫必備的屬性，若是不添加這個屬性，則動畫會變成平面效果。

通常用在舞臺元素也就是容器上，這樣會讓該容器中所用動畫元素使用一個視角，這個屬性還能夠單獨用在每一個元素中，天然元素也就只呈現本身的視角樣式。

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

2、動畫實現

下面我用部分代碼實際闡述一下3D效果的實現。

1.卡片翻轉

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.長方體

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);
    }
複製代碼

效果