CSS 实现图片翻转

今天学到一个CSS的小知识，记录分享一下：就是使用CSS来实现图片翻转-------把鼠标放在图片上时可以翻转图片，移开后又恢复原状

话不多说，直接上代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS 实现图片翻转效果</title><style>body{min-height: 100vh;padding: 0;margin: 0;display: flex;justify-content: center;align-items: center;background-color: #1db7c2;}.card{position: relative;width: 100px;height: 100px;perspective: 1000px;}.cover,.back{background-color: rgba(255,255,255,0.5);position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;backface-visibility: hidden;transition: all 1s ease-in-out;}.cover{transform: rotateY(0deg);}.back{transform: rotateY(-180deg);}.card:hover .cover{transform: rotateY(180deg);}.card:hover .back{transform: rotateY(0deg);}</style></head><body><div class="card"><div class="cover"><img src="img/emoji_笑哭.jpeg" alt="" height="100px"width="100px"></div><div class="back"><img src="img/emoji_难过.jpg" height="100px"width="100px"></div></div></body>
</html>

代码中使用到的两张图片素材（好像大小不一样，但是不影响）

CSS 实现图片翻转相关推荐

图片自动翻转css代码,用css实现图片翻转(示例代码)
简介这篇文章主要介绍了用css实现图片翻转(示例代码)以及相关的经验技巧,文章约1193字,浏览量447,点赞数1,值得参考! 用css实现图片翻转 .flip-container { perspec ...
HTML和CSS实现图片翻转效果
实现图片翻转,首先来分析一下我们希望实现的是怎样的翻转效果?又该如何去实现呢? 一.希望实现的效果页面上的图片在光标悬停在上面的时候会发生翻转效果,翻转过后显示出背面的说明文字. 鼠标没有悬停在上面 ...
CSS打造图片翻转立体3D效果
一.案例效果展示二.搭建一个基本的html结构,将需要用到的图片居中 html的结构非常简单,只要一个盒子里面放二张照片即可 html代码: <div class="img_box& ...
css实现图片翻转动画
主要是将两张图片重叠放在一起,然后实现翻转使用 backface-visibility:hidden 属性,让正面图的背面不显示效果: html: <view class="ic ...
HTML+CSS 图片翻转
HTML+CSS 图片翻转本文的主要内容是当hover时实现一张卡片的翻转(卡片两边内容不同). 实现起来比较简单,动动手指吧! 本文的主要内容是当hover时实现一张卡片的翻转(卡片两边内容不同) ...
css鼠标经过图片镜像翻转,css代码实现鼠标指向图片翻转效果
烈火网(Liehuo.Net)教程今天有读者询问制作鼠标经过时切换图片的效果,这种效果也称为"翻转"效果(roll-over).原来这种效果大多使用Javascript实现,实际 ...
CSS3实现图片翻转效果
直接上代码看效果 html: <div class="father"><div class="before">正面</div> ...
拐道交叉的css3动画,CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
html怎么将图片水平翻转,CSS3中如何实现图片翻转
今天将和大家分享如何利用CSS3中的知识来制作一个图片翻转的功能,CSS3中图片翻转效果主要通过设置transition过渡动画以及transform旋转动画来共同实现 [推荐课程:CSS3教程] 案 ...

CSS 实现图片翻转

CSS 实现图片翻转相关推荐

最新文章

热门文章