3D卡片翻轉報表

1.1 預期效果

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

1.2 實現思路

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

2.1 準備頭像

1）請下載範例中所用的圖片：头像.zip

2）將下載好的壓縮包放到%FR_HOME%webroothelppicture資料夾下進行解壓。

2.2 建立內建資料集

建立一張普通報表，建立內建資料集，我們需要名稱、頭像、資訊三個部分的內容，如下圖所示：

相關資訊如下表所示：

注：也可以使用 SQL 將這資料集中的三部分內容連接起來（由於 FRDemo 沒有回应的表，這裏就寫下格式）：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.3 設計範本

1）將內建資料集中的頭像放在 A1 儲存格並設定為「橫向擴展」，資訊放在 A2 儲存格，姓名放在 A4 儲存格。

2）在 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'>" + REPLACE(A2, " ","<br /><br />")+"</div>"  + "</div></div>"

如下圖所示：

3）設定 A3 儲存格顯示內容為「用 HTML 顯示內容」，如下圖所示：

4）設定 A4 的左父格為 A3 儲存格，如下圖所示：

5）將第一和第二行隱藏，並在「範本>報表分欄」中設定分欄，設定如下：

6）將 card.css 檔案儲存到項目路徑 %FR_HOME%webroothelpcss下，在「範本>範本 Web 屬性>引用 css」中引入該 CSS，如下圖所示：

CSS 檔案下載連結：card.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);
}
显示代码

2.4 效果預覽

2.4.1 PC 端

儲存範本，點選分頁預覽，效果如 1.1 節所示。

2.4.2 行動端

不支援行動端。

點選下載範本：3D卡片翻轉報表.cpt