delphi 实现屏幕旋转代码_纯css实现翻牌特效

最新推荐文章于 2024-07-16 16:27:11 发布

weixin_39622587

最新推荐文章于 2024-07-16 16:27:11 发布

阅读量298

点赞数

文章标签： delphi 实现屏幕旋转代码

HTML5纯css实现翻牌特效[3/17]

大家有没有看到过网上很炫的翻牌效果，牌正面对着我们，然后点击一下，牌就被翻过来了，效果很酷炫，是不是很想知道是怎么实现的么，代码很简单，跟着小编往下走。

先给大家介绍一下翻牌的原理：

1、父容器设置设置perspective，让其子元素支持3d透视。
注：perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

2、牌正面和背面设置absolute属性，让正面的背面处于同一水平线上，用z-index属性设置背面朝上

3、让背面设置translateY(180)，沿y轴旋转180度，背面朝后，backface-visibility属性让背对屏幕的时候隐藏隐藏。

4、hover属性，当鼠标经过flip_wrap时，让flip沿y轴旋转180度，让正面绕y轴旋转180度到背面隐藏，背面沿y轴旋转180转到正面来。

原理就是这样，下面就开始看具体代码吧。

HTML

<div class="flip_wrap">
<div class="flip">
<div class="side front">
<img src="http://wap.cmread.com/rbc/t/content/repository/ues/image/s109/fpbg2.png">
</div>
<div class="side back">
<img src="http://wap.cmread.com/rbc/t/content/repository/ues/image/s109/fpbg.png">
</div>
</div>
</div>

CSS

.flip_wrap{width:210px;height:220px;margin:0 auto;perspective:800px;/*perspective属性定义3D元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。*/-webkit-perspective:800px;-moz-perspective:800px;-ms-perspective:800px;-o-perspective:800px;
}
.flip{width:210px;height:220px;backface-visibility:hidden;/*背对屏幕时隐藏*/-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;transition: all 1s ease; /*为翻牌添加过渡效果*/-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-ms-transition: all 1s ease;-o-transition: all 1s ease;transform-style: preserve-3d; /*子元素将保留其 3D 位置。*/
}
.side{width:100%;height:100%;position: absolute;/*让背面和正面重叠*/left:50%;margin-left:-105px;
}
.front{z-index:2;/*让正面朝上*/
}
.back{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);
}
.flip_wrap:hover .flip{transform:rotateY(180deg);(180);-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);
}

案例展示

完整代码

<html>
<head>
<meta charset="UTF-8">
<title>翻牌</title>
<style type="text/css">
body,div{margin:0;padding:0;}
.flip_wrap{width:210px;height:220px;margin:0 auto;perspective:800px;/*perspective属性定义3D元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。*/-webkit-perspective:800px;-moz-perspective:800px;-ms-perspective:800px;-o-perspective:800px;
}
.flip{width:210px;height:220px;backface-visibility:hidden;/*背对屏幕时隐藏*/-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;transition: all 1s ease; /*为翻牌添加过渡效果*/-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-ms-transition: all 1s ease;-o-transition: all 1s ease;transform-style: preserve-3d; /*子元素将保留其 3D 位置。*/
}
.side{width:100%;height:100%;position: absolute;/*让背面和正面重叠*/left:50%;margin-left:-105px;
}
.front{z-index:2;/*让正面朝上*/
}
.back{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);
}
.flip_wrap:hover .flip{transform:rotateY(180deg);(180);-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);
}
</style>
</head>
<body>
<div class="flip_wrap">
<div class="flip">
<div class="side front">
<img src="http://wap.cmread.com/rbc/t/content/repository/ues/image/s109/fpbg2.png">
</div>
<div class="side back">
<img src="http://wap.cmread.com/rbc/t/content/repository/ues/image/s109/fpbg.png">
</div>
</div>
</div>
</body>
</html>