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

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

摘要：

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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

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

摘要：關(guān)于的詳細(xì)講解張?chǎng)涡褚粋€(gè)基本的立方體就需要結(jié)合以上三點(diǎn)屬性來實(shí)現(xiàn)。寫完這篇文章后確實(shí)感覺自己對(duì)方面的知識(shí)又熟悉了不少但是前端的主力還是月份又得繼續(xù)深入學(xué)習(xí)方面的知識(shí)嘞本文參考內(nèi)容關(guān)于的詳細(xì)講解張?chǎng)涡裨斀鈴氐桌斫夂偷膮^(qū)別的原始出處很久沒有回頭來復(fù)習(xí)CSS方面的知識(shí)了, 正好又到了月底寫文章的deadline......所以這次選擇了詳細(xì)鞏固一下CSS3動(dòng)畫有關(guān)的知識(shí)點(diǎn),因?yàn)橹爸皇怯眠^...

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

摘要：關(guān)于的詳細(xì)講解張?chǎng)涡褚粋€(gè)基本的立方體就需要結(jié)合以上三點(diǎn)屬性來實(shí)現(xiàn)。寫完這篇文章后確實(shí)感覺自己對(duì)方面的知識(shí)又熟悉了不少但是前端的主力還是月份又得繼續(xù)深入學(xué)習(xí)方面的知識(shí)嘞本文參考內(nèi)容關(guān)于的詳細(xì)講解張?chǎng)涡裨斀鈴氐桌斫夂偷膮^(qū)別的原始出處很久沒有回頭來復(fù)習(xí)CSS方面的知識(shí)了, 正好又到了月底寫文章的deadline......所以這次選擇了詳細(xì)鞏固一下CSS3動(dòng)畫有關(guān)的知識(shí)點(diǎn),因?yàn)橹爸皇怯眠^...

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

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

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

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

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

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

objc94 2019-08-21 17:08 評(píng)論0 收藏0