资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/CSS 实例之翻转图片

CSS 实例之翻转图片

番茄西红柿 / 1186人阅读

摘要：具体效果图如下主要用到的技术除了翻转和定位，还用到了一个新的属性该属性主要是用来设定元素背面是否可见。具体的步骤如下写出页面主体，通过定位使两张图片叠加在一起设置第一张图片背面不可见添加旋转度最后给出完整代码

具体效果图如下：

主要用到的技术除了3D翻转和定位 ，还用到了一个新的属性 backface-visibility：visable|hidden;

该属性主要是用来设定元素背面是否可见。

具体的步骤如下：

1、写出页面主体，

</>复制代码 
  1.  <div>
  2.         <img src="Images/b.jpg" alt="">
  3.         <img src="Images/c.jpg" alt="">
  4.     div>

2、通过定位使两张图片叠加在一起

</>复制代码 
  1.   div img {
  2.             width: 250px;
  3.             height: 170px;
  4.             position: absolute;
  5.             top: 0;
  6.             left: 0;
  7.             transition: all 1s;
  8.         }

3、设置第一张图片背面不可见

</>复制代码 
  1.  div img:first-child {
  2.             z-index: 1;
  3.             backface-visibility: hidden;
  4.         }

4、添加旋转180度

</>复制代码 
  1.  div:hover img {
  2.             transform: rotateY(180deg);
  3.         }

最后给出完整代码

</>复制代码 
  2.     
  3.     
  4.     
  5.     Document
  6.     
  7.     
  8.         
  9.         
  10.
View Code

 

云服务器 GPU云服务器 css实例 css实例教程 图片css css图片自适应

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1769.html

相关文章

  • 24, CSS 构造超链接

    摘要：宋体超链接边框宋体派生超链接宋体属性选择器超链接宋体动态超链接宋体图像翻转超链接宋体工具提示宋体给链接加上边框宋体在文章段落中加上超级链接宋体用背景图象添加记号宋体利用派生来影响链接宋体利用图片作为下划线1. 超链接边框 2. 派生超链接 3. 属性选择器超链接 4. 动态超链接 5. 图像翻转超链接 6. CSS 工具提示 1.给链接加上边框 A:link { Color: #f00; T...

    番茄西红柿 评论0 收藏0

  • 图片遮罩翻转

    摘要：效果展示代码。代码以一个为单位，在其周围生成个相同的遮罩。主要是的动画不支持翻转，只能通过来做，需要以边为单位翻转。当所有关联起来的时时候，记录上一个翻转方向，达到连贯性不触发获得相对于中心点的，坐标获得斜率到之间的数 showImg(https://segmentfault.com/img/bV8BTx?w=711&h=656); html代码。 ...

    shaonbean 评论0 收藏0

  • [面试专题]一线互联网大厂面试总结

    摘要：道阻且长啊前端面试总结前端面试笔试面试腾讯一面浏览器工作原理浏览器的主要组件包括用户界面包括地址栏后退前进按钮书签目录浏览器引擎用来查询及操作渲染引擎的接口渲染引擎渲染界面和是基于两种渲染引擎构建的，使用自主研发的渲染引擎，和都使用网络用来 道阻且长啊TAT(前端面试总结) 前端 面试 笔试 面试 腾讯一面 1.浏览器工作原理 浏览器的主要组件包括： 用户界面－ 包括地址栏、后退/前...

    lemanli 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<