css-3d動畫特效

Freeman 發布于2019-08-02 11:14 / 489人閱讀

摘要：為其盒子設置樣式為其每個設置樣式為其設置動畫源碼書頁思路有五個，分別放上五個字。

3D 首先讓我們來看一張效果圖 1.1.1

屬性

perspective ：透距離，單位像素（值越小，透視距離越近，效果越明顯）：設置父元素上

perspective-origin: 設置透視點的位置

transform-style :指定某元素的子元素是位于三維空間內，取值：flat | preserve-3d

1.1.1思路 （1）有三個div，一起放到一個盒子里面。

（2）為其盒子設置樣式

.cube{
        width: 200px;
        height: 300px;
        transform-style: preserve-3d;
        margin:100px auto;
       
        position: relative;
        transform: rotateX(30deg);
        border-radius: 50%;
            padding: 60px;
    }

(3)為其每個div設置樣式

 .mian{
        width: 200px;
        height: 300px;
        background-image: url(1.jpg);
        background-position:400px 0;
        position: absolute;
        background: url(aka.jpg);
        border: 1px solid #ccc;
        transition: 2s;
    }
    /* .mian1:hover{
        transform-origin: right;
        transform: rotateY(-60deg);
    } */
    .mian1{
        transform-origin: right;
        transform: translateX(-200px) rotateY(45deg);
        background-position:0 0;
    }

    .mian2{
        background-position: 400px 0;
    }

    .mian3{
        transform-origin: left;
        transform: translateX(200px) rotateY(45deg);
        background-position: 200px 0;
    }

（4）為其設置動畫

 .mian3:hover{
        transform: translateX(200px) rotateY(0deg);
    } 
    .mian1:hover{
        transform: translateX(-200px) rotateY(0deg);
    }

1.1.1源碼：

1.1.2

1.1.2思路： （1）有五個div，分別放上五個字。

（2）給box和div總體設置樣式

 #box{
        margin: 100px auto;
        font-size: 100px;
        color:#005aa0;
        text-align: center;
    }
 .ze1,.ze2,.ze3,.ze4,.ze5{
        display: inline-block;
        width: 90px;
        height: 100%;
        position: relative;
    }

（3）設置偽元素before和after

  
.ze1:before,.ze2:before,.ze3:before,.ze4:before,.ze5:before{
        content:attr(data);
        position: absolute;
        color: #ffffff;
        top:0;
        left: 2px;
        transform-origin: left;
        transition: transform .5s;
    }
    .ze1:before{
        content: "前";
    }
    .ze2:before{
        content: "端";
    }
    .ze3:before{
        content: "小";
    }
    .ze4:before{
        content: "學";
    }
    .ze5:before{
        content: "生";
    }
    .ze1:after,.ze2:after,.ze3:after,.ze4:after,.ze5:after {
        position: absolute;
        color: #b3b3b3;
        top:3px;
        left: 10px;
        z-index: -1;
        transform-origin: left;
        transition: transform .5s;
    }
    .ze1:after{
        content: "前";
    }
    .ze2:after{
        content: "端";
    }
    .ze3:after{
        content: "小";
    }
    .ze4:after{
        content: "學";
    }
    .ze5:after{
        content: "生";
    }

（4）為其設置動畫

.ze1:hover:before,.ze2:hover:before,.ze3:hover:before,.ze4:hover:before,.ze5:hover:before{
        transform: rotateY(-40deg) skewY(10deg);
    }
    .ze1:hover:after,.ze2:hover:after,.ze3:hover:after,.ze4:hover:after,.ze5:hover:after{
        transform: rotateY(40deg) skewY(10deg);
    }

1.1.2源碼：

1.1.3

1.1.3思路不寫，只寫源碼 1.1.3源碼：

持續更新，歡迎大家指教

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52862.html

css3 做一個類似于翻書特效的3D動畫

摘要：我們來看下做一個動畫需要哪些東西。說明各個屬性的作用代表物體距離瀏覽器是。下面我們做一個向下翻頁的數字，和一個向做翻頁的數字。我們來看下做一個css3 3D動畫需要哪些東西。前面我們已經使用transition和transform做了一些簡單的操作。設置3D場景做3D動畫，我們首先要設置3D場景。3D場景我們通常用perspective和perspective-origin兩個屬...

jiekechoo 2019-08-29 16:41 評論0 收藏0
css-3d動畫特效

摘要：為其盒子設置樣式為其每個設置樣式為其設置動畫源碼書頁思路有五個，分別放上五個字。 3D 首先讓我們來看一張效果圖 1.1.1 showImg(https://segmentfault.com/img/bVbfeDr?w=664&h=557); 屬性 perspective ：透距離，單位像素（值越小，透視距離越近，效果越明顯）：設置父元素上 perspective-origin: 設置...

microelec 2019-08-29 16:23 評論0 收藏0
移動Web利器transformjs入門

摘要：更別提配合一些運動或者時間的庫來編程了。姿勢封裝了一大堆關鍵幀動畫，開發者只需要關心添加或者移除相關的動畫的便可以。簡介在過去的兩年，越來越多的同事、朋友和其他不認識的童鞋進行移動web開發的時候，都使用了transformjs，所有必要介紹一下，讓更多的人受益，提高編程效率，并享受編程樂趣。（當然transformjs不僅僅支持移動設備，支持CSS3 3D Transforms的...

mrcode 2019-08-30 13:08 評論0 收藏0
移動Web利器transformjs入門

摘要：更別提配合一些運動或者時間的庫來編程了。姿勢封裝了一大堆關鍵幀動畫，開發者只需要關心添加或者移除相關的動畫的便可以。簡介在過去的兩年，越來越多的同事、朋友和其他不認識的童鞋進行移動web開發的時候，都使用了transformjs，所有必要介紹一下，讓更多的人受益，提高編程效率，并享受編程樂趣。（當然transformjs不僅僅支持移動設備，支持CSS3 3D Transforms的...

keithxiaoy 2019-08-20 12:33 評論0 收藏0