历史版本3 :3D卡片翻转报表 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 描述编辑
2. 思路编辑
利用HTML+css的技术来实现。
3.实现步骤编辑
1）先准备数据，如效果图所示，我们需要名字、头像、信息三个部分的内容
利用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）将第一步数据集的头像放在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>"
如下图：
3）将第一第二行隐藏，并在模板-报表分栏中设置分栏，设置如下：
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);
}
注：移动端无法达到效果