html页面图片翻转特效代码,如何使用css实现翻转图片的效果（附代码）

超、凢脫俗 2022-10-06 04:47 163阅读 0赞

![5268f80b9b1e01f982625ef6fac83ca1.png][]

本篇文章给大家带来的内容是关于如何使用css实现翻转图片的效果(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

具体效果图如下：

![18c60392ebacc8599cca990e92684e1d.gif][]

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

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

具体的步骤如下：

1、写出页面主体，

![Image 1][]

![Image 1][]

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);

\}

最后给出完整代码

Document

/\* 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);

\}

![Image 1][]

![Image 1][]

[5268f80b9b1e01f982625ef6fac83ca1.png]: /images/20221005/ad78292da3b04b26bc804a61ec98afe0.png
[18c60392ebacc8599cca990e92684e1d.gif]: /images/20221005/80271497cba74828b7b777a2b79e1564.png
[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读

相关如何用CSS3来实现卡片的翻转特效

CSS3实现翻转(Flip)效果动画效果 ![format_png][] ![format_png 1][] 效果分析当鼠标滑过包含块时，

蔚落/ 2022年11月25日 00:41/ 0 赞/ 208 阅读

相关学习笔记——CSS 3D图片翻转

> 灵活运用CSS3中的transform属性以及perspective属性。 -------------------- 1.效果图： ![watermar

我不是女神ヾ/ 2022年11月12日 14:53/ 0 赞/ 217 阅读

相关 html页面图片翻转特效代码,如何使用css实现翻转图片的效果（附代码）

![5268f80b9b1e01f982625ef6fac83ca1.png][] 本篇文章给大家带来的内容是关于如何使用css实现翻转图片的效果(附代码)，有一定的参考价值

超、凢脫俗/ 2022年10月06日 04:47/ 0 赞/ 164 阅读

相关如何实现翻转一串二进制代码：

如何实现翻转一串二进制代码：方法一; 指数法 for(i=0;i<32;i++) \{ ret=value & 1; //value为需要翻转的二进制序列

Bertha 。/ 2022年07月26日 04:15/ 0 赞/ 102 阅读

相关 CSS3特效之翻转

![这里写图片描述][SouthEast] 鼠标悬停，图片翻转 ![这里写图片描述][SouthEast 1] <!doctype html> <html

港控/mmm°/ 2022年07月11日 07:46/ 0 赞/ 250 阅读

相关 css3实现图片3d翻转效果

1.html部分 <body> <div class="main"> <div class="w"> <div clas

梦里梦外;/ 2022年06月17日 10:24/ 0 赞/ 308 阅读

相关 CSS3 + JavaScript原生实现翻转特效

利用CSS3 动画： @keyframes 一个定义动画的属性具体在这里就不详细解释了，想要详细了解的可以访问下面这个网址： http://www.

太过爱你忘了你带给我的痛/ 2022年06月03日 06:07/ 0 赞/ 192 阅读

相关简单CSS3+JQ实现图片的3D翻转

我的博客已经全部迁移至新地址，欢迎收藏我的[个人博客][Link 1]。推荐一个自己的博客：[JS -- 手动实现数组原生方法][JS --] 没想到刚开始没两天就突然断

川长思鸟来/ 2022年05月24日 20:36/ 0 赞/ 271 阅读

相关 OpenCV：图片颜色翻转

1.灰度图片翻转 import cv2 import numpy as np img = cv2.imread('test.png',1

本是古典何须时尚/ 2022年01月20日 14:13/ 0 赞/ 310 阅读

相关如何使用css3实现图片的自动轮播特效（附完整代码）

大家在浏览网页的过程中，会遇见一种名叫图片轮播的特殊效果：在同样的位置不同的图片会根据时间的变化循环播放，达到一种类似于播放幻灯片的效果。那么我们在网页开发的过程中如何实...

朱雀/ 2021年02月01日 16:58/ 1 赞/ 662 阅读