CSS3—3D翻轉_ZenDei技術網路在線

CSS3—3D翻轉

-Advertisement-

css3和html5，不會js也可以做動畫—3D翻轉

本案例主要是css3和html5，不會js也可以做動畫◕.◕

一、首先看下主要需要的樣式：

就這麼多，水平有限就不細講啦！

二、看效果：演示效果，runjs

3個效果預設樣式如上圖

看起來好亂，還是看演示吧，不放圖了==演示效果，runjs

三、html結構如下：

3個容器6個盒子，當滑鼠經過時：

1.box1繞X軸（transform-origin預設容器中心），翻轉180°至背面box2，滑鼠移開翻回

2.box3繞Y軸（transform-origin預設容器中心），翻轉180°至背面box4，滑鼠移開翻回

3.box5，box6繞Z軸，（transform-origin分別為容器左右），翻轉180°，滑鼠移開翻回

<body>
    <div class="container" ontouchstart="this.classList.toggle('hover');">
        <div class="box1">
            <span>hello~</span>
        </div>
        <div class="box2">
            <span>bye~</span>
        </div>
    </div>
    <div class="container" ontouchstart="this.classList.toggle('hover');">
        <div class="box3">
            <span>hello~</span>
        </div>
        <div class="box4">
            <span>bye~</span>
        </div>
    </div>
    <div class="container" ontouchstart="this.classList.toggle('hover');">
        <div class="box5">
            <span>bye~</span>
        </div>
        <div class="box6">
            <span>hello~</span>
        </div>
    </div>
</body>

四、下麵是樣式：

1.容器上加了perspective子元素box有透視效果

2.box2,box4是背面所以先翻轉-180°，這樣當翻到後面再翻回時符合正常視覺

3.每個box都加了backface-visibility：隱藏被旋轉的 div 元素的背面

4.box5，box6，改了旋轉中心點

<style>
    .container {
        perspective: 400px;
        transform-style: preserve-3d;
        position: relative;
    }
    .container, .box1, .box2, .box3, .box4, .box5, .box6 {
        width: 260px;
        height: 160px;
    }
    .box1, .box2, .box3, .box4, .box5, .box6 {
        backface-visibility: hidden;
        transition: 1s;
        transform-style: preserve-3d;
        position: absolute;
        top: 0;
        left: 300px;
        text-align: center;
    }
    .box1 {
        background-color:pink;
    }
    .box2 {
        background-color:red;
        transform: rotateX(-180deg);
    }
    .box3 {
        background-color:red;
    }
    .box4 {
        background-color:pink;
        transform: rotateY(-180deg);
    }
    .box5 {
        background-color:red;
        transform-origin:left;
    }
    .box6 {
        background-color:pink;
        transform-origin:right;
    }
    span{
        font-size: 20px;
        line-height: 160px;
    }
    .container:hover .box1 {transform: rotateX(180deg);}
    .container:hover .box2 {transform: rotateX(0deg);}
    .container:hover .box3 {transform: rotateY(180deg);}
    .container:hover .box4 {transform: rotateY(0deg);}
    .container:hover .box5 {transform: rotateZ(180deg);}
    .container:hover .box6 {transform: rotateZ(-180deg);}
    </style>

是不是很簡單，接下來隨意翻騰吧~

五、結語

希望讀到這裡對您有所幫助，錯誤請指正，文章不定期更改或更新，轉載請註明出處，方便溯源。

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

【同行說技術】Python程式員小白變大神必讀資料彙總（三）

在文章《Python開發、調試、爬蟲類工具大全》裡面向大家總結了各種實用工具和爬蟲技術，今天小編收集了5篇帶有實例乾貨的資料，趕緊來看看吧！另外，喜歡寫博客的博主可以申請加工程師博主交流群：391519124，分享你的博文，和大牛們一起交流技術~ 一、OSINT + Python = 自定義黑客Py
外觀模式（三層解耦）

說到外觀模式，很容易想到的是設計一件漂亮的衣服然後穿上自己的身上，讓自己看起來更加的漂亮，但是這個可能並不是這樣子的，從更深層次的來說，外觀更應該是所見即所得的，對於觀眾來說，看起來可能就是很簡單，但是裡面所有的東西的複雜程度，我們並不知道。在程式開發的過程中，我們時常的會用到一些類與類之間的關聯
Lind.DDD.Events領域事件介紹

回到目錄閑話多說領域事件大叔感覺是最不好講的一篇文章，所以拖欠了很久，但最終還是在2015年年前（陰曆）把這個知識點講一下，事件這個東西早在C#1.0時代就有了，那時學起來也是一個費勁，什麼是委托，哪個是事件，搞的大家是糊裡糊塗，進入Ｃ#２.０時代後，大叔也買了一本書，對於delegate和ev
Double Dispatch講解與實例-面試題

引言說實話，我看過GoF《Design Patterns》，也曾深深的被李建忠《設計模式》系列Webcast吸引。但是還沒有見過“Double Dispatch模式”。的確GoF提及的設計模式只是最初對設計模式的系統介紹，它不可能涵蓋所有的模式。另外隨著時間的流逝，技術日新月異的變化，技術大牛們又
javascript設計模式實踐之職責鏈--具有百葉窗切換圖片效果的JQuery插件（三）

在上一篇《javascript設計模式實踐之模板方法--具有百葉窗切換圖片效果的JQuery插件（二）》里，通過採用模板方法模式完成了切換效果對象的構建編寫。接下來就是完成各效果對象的調用和聯動。切換要求：當前圖片顯示指定時間後執行切換效果並切換下一張圖片，最後一個切換後從頭開始。按照要求一個
javascript設計模式實踐之模板方法--具有百葉窗切換圖片效果的JQuery插件（二）

在上一篇《javascript設計模式實踐之迭代器--具有百葉窗切換圖片效果的JQuery插件（一）》里，通過採用迭代器模式完成了各初始化函數的定義和調用。接下來就要完成各個切換效果的編寫。先思考一下一個切換效果需要完成的操作 1.準備階段，將各個strip歸位到動畫效果開始的位置。 2.動畫效
javascript設計模式實踐之迭代器--具有百葉窗切換圖片效果的JQuery插件（一）

類似於幻燈片的切換效果，有時需要在網頁中完成一些圖片的自動切換效果，比如廣告，宣傳，產品介紹之類的，那麼單純的切就沒意思了，需要在切換的時候通過一些效果使得切換生動些。比較常用之一的就是窗帘切換了。先貼上完成的效果。實現原理不複雜，在動的一條一條的稱之為“窗帘條”或者是“strip”，每一個s
H5中的touch事件

最近剛好弄了一個關於在移動端的滾動條，多多少少有點感觸！ touch中共有touchstart、touchmove和touchend三個事件； touchstart：觸摸開始的時候觸發 touchmove：手指在屏幕上滑動的時候觸發 touchend：觸摸結束的時候觸發並且每個觸摸事件都包括了三個