[Blogger] 圖像翻轉

讓圖片可以翻轉，設計如下：

// Layout

<div 'card'>
    <div 'face front'>
        <img #1>
    <div 'face back'>
        <img #2>

// Style

card: 定義寬高和景深
face: position: absolute;
front: z-index: 10;
back: z-index: 8;
card-flipped + front: z-index: 8;
card-flipped + back: z-index: 10;

// JS

啟用 timer, 每一段時間後 toggleClass (card-flipped); -> 加上/移除 class
=> 使用 rotate3d 動畫效果調整 z-index，亦即讓 front/back 的 z-index 互換

 

程式碼如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>   <script> $(function () {     initAutoFlip (5000);        // 5000 ms });   function initAutoFlip (timeMs) {     var $card = $(".card");     function flip (arg1, arg2) {         $card.toggleClass ('card-flipped');     }         setInterval (flip, timeMs); } </script>

 

<style> .infoBlk {     margin: 4px;     height: 82px;     width: 82px;//50%; }   .card {     margin: 0px;     perspective: 1000;     -webkit-perspective: 1000;     height: 82px;     width: 82px;//50%; }   .face {     position: absolute;         transition: all 1s ease;     -webkit-transition: all 1s ease;     -moz-transition: all 1s ease;         backface-visibility: hidden;     -ms-backface-visibility: hidden;     -moz-backface-visibility: hidden;     -webkit-backface-visibility: hidden;     -o-backface-visibility: hidden; }   .front {     z-index: 10; }   .back {     transform:rotate3d(0,1,0,-180deg);     -ms-transform:rotate3d(0,1,0,-180deg);  /* IE 9 */     -moz-transform:rotate3d(0,1,0,-180deg); /* Firefox */     -webkit-transform:rotate3d(0,1,0,-180deg); /* Safari & Chrome */     -o-transform:rotateY(0,1,0,-180deg);  /* Opera */     z-index: 8; }   .card-flipped .front{     transform:rotate3d(0,1,0,180deg);     -ms-transform:rotate3d(0,1,0,180deg);/* IE 9 */     -moz-transform:rotate3d(0,1,0,180deg);/* Firefox */     -webkit-transform:rotate3d(0,1,0,180deg);/* Safari 和 Chrome */     -o-transform:rotate3d(0,1,0,180deg);  /* Opera */     z-index: 8; }   .card-flipped .back{     transform:rotate3d(0,1,0,0deg);     -ms-transform:rotate3d(0,1,0,0deg);/* IE 9 */     -moz-transform:rotate3d(0,1,0,0deg);/* Firefox */     -webkit-transform:rotate3d(0,1,0,0deg);/* Safari 和 Chrome */     -o-transform:rotate3d(0,1,0,0deg);  /* Opera */     z-index: 10; } </style>

  

<div class="widget-content">

<table> <tr> <td> <div class="card"> <div class="face front"> <a href="https://ankas-ni.blogspot.com/2020/09/aboutMe.html"> <img alt="我的相片" class="profile-img" height="78" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd7s6p74wWWpGO7jQ4l-0s9NH-mv5EeoxeK9UyRzqXh1BG5HdU_DzFJvP2KkIl2b7ykfhYsvL5SLzqkjC0tRfUCefuHZqm_YXBVzDj5TdnuIgmNutc8ClCTdIQmFnzpLyU0jZeIRBrGWs/s80/rabbit3.JPG" width="78" /> </a> </div> <div class="face back"> <a href="https://ankas-ni.blogspot.com/2020/09/aboutMe.html"> <img alt="我的相片" class="profile-img" height="78" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_m9UCoimzNUxJ_Behf_NrPUhPue-MMU0tr8l3X7vj0BN0vMRdmVhdXWSJOjXUca3wFwMpRXKz5n9X0PszB0Mr6yQvxdpmg9NNUAWRhTkPpg8XGBNAZLyOuw4jCdCYIA-0UJ4F6UKIfgY/s246/pig.JPG" width="78" /> </a> </div> </div> </td> <td> <div class="infoBlk"> <dl class="profile-datablock"> <dt class="profile-data"> <a class="profile-name-link g-profile" href="https://ankas-ni.blogspot.com/2020/09/aboutMe.html" rel="author" style="background-image: url(&quot;//www.blogger.com/img/logo-16.png&quot;);"> ankas </a> </dt> </dl> <a class="profile-link" href="https://ankas-ni.blogspot.com/2011/09/blog-post.html" rel="author">經歷專案</a> </div> </td> </tr> </table>

 

<div class="clear"></div>

</div>

 

 

效果：

 

 

參考：

乾貨滿滿！如何優雅簡潔地實現時鐘翻牌器(支持JS/Vue/React)

CSS图片翻转动画技术详解

CSS3 3D transforms系列教程-卡片翻转

CSS3 实现游戏王卡片翻转效果

 

 

結語/心得：

[1] card div 若使用了 position: absolute; 後面的 div 就沒法水平排列，圖片之後的 infoBlk ([ankas] 及 [經歷專案] 行) 都會顯示在圖片下面，這邊我沒找到原因及解法，所以我用一列二行的 table 來排列 card 及 infoBlk，效果會和未加入圖片翻轉功能前一致。

 

[2] API & CSS 屬性

背景顏色	background-color: rgb(178, 39, 49);
位置採 absolute	position: absolute;
增加/移除指定的 class	$card.toggleClass ('card-flipped');

  

[3] 在此頁面放置的範例會和小工具上的互有影響，翻轉時間會錯亂，因此程式碼在多個相同 div 下將引發問題，使用上需注意。