本文的主要内容是当hover时实现一张卡片的翻转（卡片两边内容不同）。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片翻转</title><style>.pictures-flipping {background-color: rgb(50, 50, 85);height: 500px;}.pictures-flipping>div {width: 250px;height: 350px;position: absolute;}.box:hover .imgf {transform: rotateY(180deg);}.box:hover .imgb {transform: rotateY(360deg);}div img {position: absolute;transition: all 2s;}div img:first-child {z-index: 1;backface-visibility: hidden;}div img:nth-child(2) {transform: rotatey(.5turn);}.box1 {left: 100px;top: 100px;}.box2 {left: 400px;top: 100px;}.box3 {left: 700px;top: 100px;}.box4 {left: 1000px;top: 100px;}</style>
</head><body><div class="pictures-flipping"><div class="box1 box"><img class="imgf" src="img/1.jpg" width="100%"><img class="imgb" src="img/1.1.jpg" width="100%"></div><div class="box2 box"><img class="imgf" src="img/2.jpg" width="100%"><img class="imgb" src="img/2.2.jpg" width="100%"></div><div class="box3 box"><img class="imgf" src="img/3.jpg" width="100%"><img class="imgb" src="img/3.3.jpg" width="100%"></div><div class="box4 box"><img class="imgf" src="img/4.jpg" width="100%"><img class="imgb" src="img/4.4.jpg" width="100%"></div></div>
</body></html>

实现起来比较简单，动动手指吧！

HTML+CSS 图片翻转相关推荐

拐道交叉的css3动画,CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
图片自动翻转css代码,用css实现图片翻转(示例代码)
简介这篇文章主要介绍了用css实现图片翻转(示例代码)以及相关的经验技巧,文章约1193字,浏览量447,点赞数1,值得参考! 用css实现图片翻转 .flip-container { perspec ...
html页面图片翻转特效代码,如何使用css实现翻转图片的效果（附代码）
本篇文章给大家带来的内容是关于如何使用css实现翻转图片的效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 具体效果图如下: 主要用到的技术除了3D翻转和定位 ,还用到了 ...
HTML和CSS实现图片翻转效果
实现图片翻转,首先来分析一下我们希望实现的是怎样的翻转效果?又该如何去实现呢? 一.希望实现的效果页面上的图片在光标悬停在上面的时候会发生翻转效果,翻转过后显示出背面的说明文字. 鼠标没有悬停在上面 ...
CSS 实现图片翻转
今天学到一个CSS的小知识,记录分享一下:就是使用CSS来实现图片翻转-------把鼠标放在图片上时可以翻转图片,移开后又恢复原状话不多说,直接上代码: <!DOCTYPE html> ...
CSS打造图片翻转立体3D效果
一.案例效果展示二.搭建一个基本的html结构,将需要用到的图片居中 html的结构非常简单,只要一个盒子里面放二张照片即可 html代码: <div class="img_box& ...
css鼠标经过图片镜像翻转,css代码实现鼠标指向图片翻转效果
烈火网(Liehuo.Net)教程今天有读者询问制作鼠标经过时切换图片的效果,这种效果也称为"翻转"效果(roll-over).原来这种效果大多使用Javascript实现,实际 ...
css照片翻转动画（当鼠标悬停在图片上方时图片翻转）
css照片翻转动画第一次写博客也不知道怎么排版有什么建议私信我 - 鼠标悬停时图片旋转到垂直于视线的90度位置文字介绍旋转在垂直于视线的位置这是html代码 <!DOCTYPE h ...
CSS3实现图片翻转效果
直接上代码看效果 html: <div class="father"><div class="before">正面</div> ...

HTML+CSS 图片翻转

HTML+CSS 图片翻转

本文的主要内容是当hover时实现一张卡片的翻转（卡片两边内容不同）。

实现起来比较简单，动动手指吧！

HTML+CSS 图片翻转相关推荐

最新文章

热门文章