css實現(xiàn)3D切換功能

xuhong 發(fā)布于2019-04-23 11:41 / 2786人閱讀

摘要：

Demo

asdasdasd ?

DOCTYPE html>
<html lang="en">
<head>
    <title>Demotitle>
  <style>
       #app{
           width: 100px;
           height: 35px;
           background-color: #006600;
           text-align: center;
           line-height: 35px;
           position: relative;
           transform-style: preserve-3d;
           transition: all 0.3s linear;
       }
       #app:hover{
           transform: rotateX(90deg);
           transition: all 0.3s linear;
           -webkit-transform-origin: 50% 0;
       }
       #app:before{
           position: absolute;
           top: 100%;
           left: 0;
           content: attr(data-hover);
           width: 100px;
           height: 35px;
           transform: rotateX(-90deg);
           transition: all 0.3s linear;
           transform-origin: 50% 0;
           text-align: center;
           line-height: 35px;
            background-color: red;
       }
    style>
 
<div class="box">
    <div id="app" data-hover="asdasdasd">
        asdasdasd
    div>
div>
body>
html>

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

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

相關(guān)文章

CSS動畫之旋轉(zhuǎn)魔方輪播

摘要：關(guān)于的詳細講解張鑫旭一個基本的立方體就需要結(jié)合以上三點屬性來實現(xiàn)。寫完這篇文章后確實感覺自己對方面的知識又熟悉了不少但是前端的主力還是月份又得繼續(xù)深入學(xué)習(xí)方面的知識嘞本文參考內(nèi)容關(guān)于的詳細講解張鑫旭詳解徹底理解和的區(qū)別的原始出處很久沒有回頭來復(fù)習(xí)CSS方面的知識了, 正好又到了月底寫文章的deadline......所以這次選擇了詳細鞏固一下CSS3動畫有關(guān)的知識點,因為之前只是用過...

leone 2019-08-29 15:10 評論0 收藏0
CSS動畫之旋轉(zhuǎn)魔方輪播

摘要：關(guān)于的詳細講解張鑫旭一個基本的立方體就需要結(jié)合以上三點屬性來實現(xiàn)。寫完這篇文章后確實感覺自己對方面的知識又熟悉了不少但是前端的主力還是月份又得繼續(xù)深入學(xué)習(xí)方面的知識嘞本文參考內(nèi)容關(guān)于的詳細講解張鑫旭詳解徹底理解和的區(qū)別的原始出處很久沒有回頭來復(fù)習(xí)CSS方面的知識了, 正好又到了月底寫文章的deadline......所以這次選擇了詳細鞏固一下CSS3動畫有關(guān)的知識點,因為之前只是用過...

LittleLiByte 2019-08-02 10:18 評論0 收藏0
CSS實現(xiàn)3D切換效果

摘要：譬如設(shè)置值為，相對于，則元素的變形較弱一些。經(jīng)過測試，其視覺效果和是一樣，相當于從無限遠處平面超長焦觀察這個動畫。其作用是當旋轉(zhuǎn)過正面，設(shè)置是否顯示其背面。先上效果圖和代碼吧鼠標懸浮上去，藍色的front面開始旋轉(zhuǎn) showImg(https://segmentfault.com/img/bVxLN9); 藍色的front面轉(zhuǎn)過90°時，黃色的back面會顯現(xiàn)出來， showImg(...

QiShare 2019-08-02 15:55 評論0 收藏0
CSS實現(xiàn)3D切換效果

摘要：譬如設(shè)置值為，相對于，則元素的變形較弱一些。經(jīng)過測試，其視覺效果和是一樣，相當于從無限遠處平面超長焦觀察這個動畫。其作用是當旋轉(zhuǎn)過正面，設(shè)置是否顯示其背面。先上效果圖和代碼吧鼠標懸浮上去，藍色的front面開始旋轉(zhuǎn) showImg(https://segmentfault.com/img/bVxLN9); 藍色的front面轉(zhuǎn)過90°時，黃色的back面會顯現(xiàn)出來， showImg(...

djfml 2019-08-30 13:05 評論0 收藏0
SegmentFault 技術(shù)周刊 Vol.35 - WebGL：打開網(wǎng)頁看大片

摘要：在文末，我會附上一個可加載的模型方便學(xué)習(xí)中文藝術(shù)字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術(shù)生態(tài)鏈中最為令人振奮的標準之一，它把 Web 帶入了 3D 的時代。初識 WebGL 先通過幾個使用 Web...

objc94 2019-08-21 17:08 評論0 收藏0