css翻转图片

于 2019-08-16 22:18:56 发布
阅读量1k 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KkaBum/article/details/99686506
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         div {
  8.             width: 77px;
  9.             height: 77px;
  10.             margin: 100px auto;
  11.             position: relative;
  12.         }
  13.         img {
  14.             position: absolute;
  15.             top: 0;
  16.             left: 0;
  17.             transition: all 1s;
  18.         }
  19.         img:first-child {
  20.             z-index: 1;
  21.             backface-visibility: hidden;/*设置图片不面向屏幕时隐藏*/
  22.         } 
  23.         div:hover img {
  24.             transform: rotateY(180deg);
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div>
  30.         <img src="ie.jpg">
  31.         <img src="chrome.jpg">
  32.     </div>
  33. </body>
  34. </html>
KkaBum
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值