欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用純CSS實現(xiàn)3D旋轉效果的示例代碼

  發(fā)布時間：2020-01-03 15:39:54   作者：CoderMiner   我要評論
這篇文章主要介紹了使用純CSS實現(xiàn)3D旋轉效果的示例代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

主要使用CSS中的 preserve-3d 、perspective 屬性實現(xiàn)3D效果

效果

HTML代碼

<body>
    <div class="box">
        <div class="face front">
            <h2>前面</h2>
        </div>
        <div class="face back">
            <h2>背面</h2>
        </div>
    </div>
</body>

為了演示效果，將元素居中，body的css設置

*{
    margin: 0;
    padding: 0;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #333;
}

box 屬性設置

.box{
    width: 300px;
    height: 400px;
    transform-style: preserve-3d;
    position: relative;
}

.face{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
    transition: 2s ease-in-out;
    transform: perspective(500px) rotateY(0deg);
}

前面屬性設置

.face.front{
    background: #ff0;
}

背面屬性設置,在Y軸旋轉 180度,先不顯示

.face.back{
    background: #3bc2ff;
    color: #fff;
    transform: perspective(500px) rotateY(180deg);
}

設置懸浮的動畫效果

.box:hover .face.front{
    transform: perspective(500px) rotateY(180deg);
}

.box:hover .face.back{
    transform: perspective(500px) rotateY(360deg);
}

設置文字的懸浮效果

.box .face h2{
    font-size: 4em;
    text-transform: uppercase;
    transform: perspective(500px) translateZ(50px);
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

  • CSS3實現(xiàn)酷炫的3D旋轉透視效果

    這篇文章主要介紹了CSS3實現(xiàn)酷炫的3D旋轉透視效果,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
    2019-11-21

  • HTML5+css3：3D旋轉木馬效果相冊

    這篇文章主要介紹了HTML5+css3：3D旋轉木馬效果相冊，主要運用了perspective和tranlateY這兩個知識點，有需要的可以了解一下。
    2017-01-03

  • CSS3讓登陸面板3D旋轉起來

    點擊登陸面板會發(fā)生360度旋轉，并顯示信息，真正使用CSS3讓登陸面板3D旋轉起來，如何實現(xiàn)登陸面板3D旋轉，感興趣的小伙伴們可以參考一下
    2016-05-03

  • CSS3 3D旋轉rotate效果實例介紹

    這篇文章主要為大家詳細介紹了CSS3 3D旋轉rotate效果實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-05-03

  • CSS3近階段篇之酷炫的3D旋轉透視

    這篇文章主要介紹了CSS3近階段篇之酷炫的3D旋轉透視 的相關資料,需要的朋友可以參考下
    2016-04-28

  • 純CSS3實現(xiàn)3D旋轉書本效果

    有一些前沿的電商網(wǎng)站已經(jīng)開始使用3D模型來展示商品并支持在線定制，而其中圖書的展示是最為簡單的一種，無需復雜的建模過程，使用圖片和CSS3的一些變換即可實現(xiàn)更好的展示
    2016-03-21

  • css3實現(xiàn)3d旋轉動畫特效

    這篇文章主要介紹了css3實現(xiàn)3d旋轉動畫特效，使用CSS3實現(xiàn)了3d立方體的左旋轉，右旋轉，上下旋轉等效果，十分實用，有需要的小伙伴來參考下吧
    2015-03-10

最新評論