CSS3翻转方块

最新推荐文章于 2022-06-06 16:22:00 发布

weixin_30414635

最新推荐文章于 2022-06-06 16:22:00 发布

阅读量173

点赞数

原文链接：http://www.cnblogs.com/johnhery/p/9790708.html

版权

1 .wutai{width: 1000px;;}
2 .container{position:relative;transform-style:preserve-3d;width: 100px;height: 100px;transition:all .5s linear;float:left;margin: 10px;}
3 .box1,.box2{position:absolute;width: 100px;height: 100px;line-height: 100px;font-family:arial;color:#CCC;text-align:center;font-size:40px;transform:perspective(500px);}
4 .box1{background: darkgreen;transform:rotateX(0deg) translateZ(50px);}
5 .box2{background: #C00;transform:rotateX(-90deg) translateZ(50px);}
6     .container:hover{transform:rotateX(90deg) rotateZ(0deg);}

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <meta name="viewport" content="width=device-width">
 6   <title>CSS3翻转方块</title>
 7 </head>
 8 <body>
 9   <div class="wutai">
10     <div class="container">
11       <div class="box1">A</div>
12       <div class="box2">B</div>
13     </div>
14     <div class="container">
15       <div class="box1">B</div>
16       <div class="box2">C</div>
17     </div>
18     <div class="container">
19       <div class="box1">C</div>
20       <div class="box2">D</div>
21     </div>
22     <div class="container">
23       <div class="box1">D</div>
24       <div class="box2">E</div>
25     </div>
26   </div>
27 </body>
28 </html>

转载于:https://www.cnblogs.com/johnhery/p/9790708.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30414635

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3翻转方块

1 .wutai{width: 1000px;;}2 .container{position:relative;transform-style:preserve-3d;width: 100px;height: 100px;transition:all .5s linear;float:left;margin: 10px;}3 .box1,.box2{position:abso...
复制链接

扫一扫