3D卡片翻轉報表

1

預期效果。

1. 在關於圖片的報表設計中，列式報表、卡分欄報表都太傳統並且不美觀，希望實現圖片和文字介紹相互轉換的報表，如下。

2

實現思路。

1. 利用 HTML+CSS 的技術來實現。

1. 先準備資料，如效果圖所示，我們需要名稱、頭像、資訊三個部分的內容；利用 SQL 將這三部分內容連接起來（由於 FRDemoTW沒有響應的表，這裏就寫下格式）。

   select name as 姓名,image as 頭像,'name:'+name+'<br>sex:'+sex+'<br>age:'+age+'<br>birth:'+birth+'<br>tel:'+tel+'<br>addr:'+addr as 資訊 from table

2. 將第一步資料集的頭像放在 A1 儲存格（橫向擴展），資訊放在 A2 儲存格，姓名放在 A4 儲存格，在 A3 儲存格裏填入如下公式：

   "<div class='flip-container' ontouchstart='this.classList.toggle(\'hover\');'>" + "<div class='flipper'>" + "<div class='front'> <img src='" + A1 + "' width=120px; style='border-radius:10px;'/></div>" + "<div class='back'>" + A2 + "</div>" + "</div></div>"

   如圖1所示。

3. 將第一第二列隱藏，並在【範本】→【報表換列換欄】中設定分欄，設定如圖2所示。

4. 將 card.css 檔案儲存到專案路徑【webroot\help\css】下，在【範本】→【範本 Web 屬性】→【引用 css】中引入該 CSS。

   其中，CSS 檔案如下：

   .flip-container {
      /*設定元素被查看位置的檢視表*/
   -webkit-perspective: 1000;
   }
   /* flip the pane when hovered */
   .flip-container:hover .flipper, .flip-container.hover .flipper {
       /*定義沿着 Y 軸的 3D 旋轉(旋轉的角度)*/
   transform: rotateY(180deg);
   }
   .flip-container, .front, .back {
   width: 120px;
   height: 120px;
   }
   /* flip speed goes here */
   .flipper {
       /*完成過渡效果所需的時間*/
   transition: 0.6s;
   /*轉換的子元素保留其 3D 轉換（保持運動完的狀態）*/
   transform-style: preserve-3d;
       /*設定元素相對定位*/
   position: relative;
   }
   /* hide back of pane during swap */
   .front, .back {
       /*設定元素的背面不可見*/
   backface-visibility: hidden;
       /*設定元素的邊框屬性*/
       border:1px solid #d6ccc4;
       /*設定元素的邊框圓角*/
       border-radius:10px;
       /*設定元素絕對定位*/
   position: absolute;
   top: 0;
   left: 0;
   }
   /* front pane, placed above back */
   .front {
       /*設定元素的堆疊順序，順序高的顯示在前面*/
   z-index: 2;
   }
   /* back, initially hidden pane */
   .back {
       /*設置元素背景顔色*/
       background-color:#e7e5e1;
   /*定義沿着 Y 軸的 3D 旋轉(旋轉的角度)*/
   transform: rotateY(180deg);
   }

注：行動端無法達到效果。