这大概是晚上最简单的翻牌效果了吧

CSS旋转效果

最新推荐文章于 2020-07-10 09:06:58 发布

weixin_30710457

最新推荐文章于 2020-07-10 09:06:58 发布

阅读量74

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xuzishuai/p/8821034.html

本文介绍了一个使用CSS实现的简单鼠标悬停效果，通过设置不同的:hover伪类实现前后两个div的翻转动画，展示了如何利用CSS的transform属性进行元素的旋转。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <style type="text/css">
 7     * {
 8       margin: 0;
 9       padding: 0;
10     }
11 
12     html, body {
13       height: 100%;
14     }
15 
16     .wrapper {
17       position: relative;
18       width: 200px;
19       height: 200px;
20     }
21 
22     .wrapper:hover .font {
23       transform: rotateY(90deg);
24       transition: 200ms linear;
25     }
26 
27     .wrapper:hover .back {
28       transform: rotateY(0deg);
29       transition: 200ms linear 200ms;
30     }
31 
32     .font {
33       position: absolute;
34       width: 200px;
35       height: 200px;
36       background: yellow;
37       z-index: 10;
38       transition: 200ms linear 200ms;
39     }
40 
41     .back {
42       position: absolute;
43       width: 200px;
44       height: 200px;
45       background: red;
46       transition: 200ms linear;
47       transform: rotateY(90deg);
48     }
49   </style>
50 </head>
51 <body>
52   <div class="wrapper">
53     <div class="font"></div>
54     <div class="back"></div>
55   </div>
56 </body>
57 </html>