CSS 实例之翻转图片

具体效果图如下：

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

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

具体的步骤如下：

1、写出页面主体，

 <div><img src="Images/b.jpg" alt=""><img src="Images/c.jpg" alt=""></div>

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

  div img {width: 250px;height: 170px;position: absolute;top: 0;left: 0;transition: all 1s;}

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

 div img:first-child {z-index: 1;backface-visibility: hidden;}

4、添加旋转180度

 div:hover img {transform: rotateY(180deg);}

最后给出完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* backface-visibility */div {width: 250px;height: 170px;margin: 100px auto;position: relative;}div img {width: 250px;height: 170px;position: absolute;top: 0;left: 0;transition: all 1s;}div img:first-child {z-index: 1;backface-visibility: hidden;}div:hover img {transform: rotateY(180deg);}</style>
</head><body><div><img src="Images/b.jpg" alt=""><img src="Images/c.jpg" alt=""></div>
</body></html>

View Code

转载于:https://www.cnblogs.com/Assist/p/9685391.html

CSS 实例之翻转图片相关推荐

html页面图片翻转特效代码,如何使用css实现翻转图片的效果（附代码）
本篇文章给大家带来的内容是关于如何使用css实现翻转图片的效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 具体效果图如下: 主要用到的技术除了3D翻转和定位 ,还用到了 ...
用css实现扑克牌，图片的翻转效果
用css实现扑克牌,图片的翻转效果话不多说,直接上代码! 1.实现商品图片的翻转以及信息的展示(下面代码仅是个人想要效果的HTML代码,所有的class名称可根据自身需求进行改动) <!doc ...
css改变鼠标图片大小,CSS实现鼠标经过图片上图片等比缩放效果（代码实例）
本篇文章给大家带来的内容是关于如何使用CSS实现鼠标经过图片上图片缩放(缓慢变化,有过渡效果,缩放的过程是有动画过渡的)效果,主要用到CSS transform属性,css3 transition属性 ...
html如何实现立体效果,纯css实现立体摆放图片效果的实例代码
1. 元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
[css] 使用css写一个垂直翻转图片的效果
[css] 使用css写一个垂直翻转图片的效果 transform: rotateX(180deg); /* 垂直镜像翻转 */ 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持 ...
html页脚显示不出来,CSS实例:让页脚保持在未满屏页面的底部
CSS实例:让页脚保持在未满屏页面的底部互联网发布时间:2008-10-17 19:20:27 作者:佚名我要评论在内容不超过一屏的情况下,当浏览器窗口变小那行页脚文字会跟着向上浮 ...
设计图片转换html5,在HTML5中翻转图片
貌似 HTML5 的 Canvas 只提供了图片的旋转.缩放功能,没有提供图片翻转(水平翻转或垂直翻转)的支持,搜索加试验之后,得到几种实现图片翻转的方法,记录一下. 第一种最简单的是使用 CSS,代 ...
html5导航按钮,CSS实例:超酷的网站导航按钮
CSS实例:超酷的网站导航按钮互联网发布时间:2009-04-02 19:35:20 作者:佚名我要评论网页制作Webjx文章简介:本文一步一步手把手教你打造一个极酷的三层分离的标 ...
html水平镜像和垂直镜像,css实现镜像翻转的方法有哪些
css实现镜像翻转的方法有哪些发布时间:2020-06-08 18:07:43 来源:亿速云阅读:470 作者:Leah css实现镜像翻转的方法有哪些?针对这个问题,今天小编总结这篇有关css镜 ...

CSS 实例之翻转图片

CSS 实例之翻转图片相关推荐

最新文章

热门文章