介绍 <李> & lt; ! doctype html>
& lt; html>
& lt; head>
& lt; meta charset=皍tf-8"祝辞
& lt; title> css3 翻牌& lt;/title>
& lt;/head>
& lt; body>
& lt; style>
*,{
保证金:0;
填充:0;
}
ul、
li {
保证金:0;
填充:0;
list-style:没有;
}
.flip-container,
.front1,
.back1 {
宽度:283 px;
身高:283 px;
}
.front1,
.back1 {
位置:绝对的;
顶部:0;
左:0;
backface-visibility:隐藏;
-webkit-backface-visibility:隐藏;
过渡:0.6 s 打发走;
-webkit-transition: .6s 打发走;
传输格式:preserve-3d;
-webkit-transform-style: preserve-3d;
}
.front1 img,
.back1 img {
宽度:283 px;
身高:283 px;
溢出:隐藏;
}
.front1 {
z - index: 2;
变换:rotateY(0度);
-webkit-transform: rotateY(0度);
}
.back1 {
z - index: 1;
变换:rotateY(-180度);
-webkit-transform: rotateY(-180度);
}
.back2 {
变换:rotateY(0度);
-webkit-transform: rotateY(0度);
z - index: 2;
}
.front2 {
变换:rotateY(180度);
-webkit-transform: rotateY(180度);
z - index: 1
}
& lt;/style>
& lt; ul>
& lt; li 类=癴lip-container “比;
& lt; div 类=癴ront1 flipper"祝辞& lt; img src=https://www.yisu.com/zixun/薄?快捷方式/壁纸/2. jpg”>
这篇文章主要介绍HTML5如何实现移动端点击翻牌功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
效果
一个大小的两个面,在同一位置上
<李>正面的Y轴旋转为0度
<李>背面的Y轴旋转180度
<李>隐藏被旋转的div元素的背面(backface-visibility)
<李>点击的时候同时改变正面和背面的旋转角度,给一个动画的时间(过渡)
记得换图片路径哦~
以上是“HTML5如何实现移动端点击翻牌功能”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
