HTML和CSS实现图⽚翻转效果
实现图⽚翻转，⾸先来分析⼀下我们希望实现的是怎样的翻转效果？⼜该如何去实现呢？
⼀、希望实现的效果
页⾯上的图⽚在光标悬停在上⾯的时候会发⽣翻转效果，翻转过后显⽰出背⾯的说明⽂字。
⿏标没有悬停在上⾯的效果
⿏标悬停在其中⼀张图⽚上的效果：
⼆、实现⽅法
每幅图⽚的翻转效果都是沿着Y轴进⾏反转的，可以是⽤3D变换来实现这种效果。下⾯来具体分析实现的各个步骤。
HTML结构部分：
1、⾸先将变换图⽚和⽂字放在⼀个⽗容器中，因为设置了五张图⽚所以需要五个⽗容器。这五个⽗容器⼜被放置在⼀个div（舞台）内进⾏变换。
2、在每个⽗容器⾥⾯有包含两个部分：(1) 正⾯显⽰的图⽚(2)背⾯的说明⽂字
3、最后采⽤层定位，让图⽚和⽂字部分出现叠加的效果，经过3D变换后⾯的⽂字就会被显⽰出来。
CSS样式部分：
1、⾸先默认样式清零，规定图⽚（img）的宽⾼，为主体部分（body）设置背景颜⾊（这⾥的是#7a4390）
2、为最外⾯的"舞台"（.piclist），设置宽⾼和位置（垂直⽅向200px，⽔平⽅向上居中）。
3、设置⽗容器样式（.picbox），浮动定位排列⼀⾏，宽⾼和外边距，由于⽗元素⾥⾯包含需要变换的内容，要为其定义3D变换（transform-style:preseve-3d），变换完成时间1.5s；设置层定位的⽅式 相对定位
⿏标悬停在⽗容器上时发⽣绕Y轴的180°旋转
4、设置⽗容器⾥的内容（.box）图⽚和⽂字共同的效果，宽⾼。内容绝对定位
内容是绝对定位⽗元素相对定位，脱离⽂档流定位，失去原有的位置，从⽽发⽣堆叠效果
5、正⾯图⽚的样式（.front）边框、为了美观加⼊边框阴影。
6、背⾯⽂字样式（.back）背景颜⾊、边框、⽂字样式。设置初始状态下就翻转180°
下⾯是实现代码
HTML部分
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>图⽚翻转</title>
6<link rel="stylesheet" href="图⽚翻转.css">
7</head>
8<body>
9<div class="piclist">
10<div class="picbox">
11<div class="box front"><img src="wf1.jpg" alt=""></div> 12<div class="box back"><h2>炫酷⽅块</h2></div>
13</div>
css特效文字14<div class="picbox">
15<div class="box front"><img src="wf2.jpg" alt=""></div> 16<div class="box back"><h2>炫酷⽅块</h2></div>
17</div>
18<div class="picbox">
19<div class="box front"><img src="wf4.jpg" alt=""></div> 20<div class="box back"><h2>炫酷⽅块</h2></div>
21</div>
22<div class="picbox">
23<div class="box front"><img src="wf5.jpg" alt=""></div> 24<div class="box back"><h2>炫酷⽅块</h2></div>
25</div>
26<div class="picbox">
27<div class="box front"><img src="wf6.jpg" alt=""></div> 28<div class="box back"><h2>炫酷⽅块</h2></div>
29</div>
30</div>
31</body>
32</html>
CSS部分
1*{
2    margin:0;
3    padding:0;
4 }
5body{
6    background: #7a4390;
7 }
8img{
9    width:200px;
10    height:200px;
11 }
12.piclist{
13    width:1200px;
14    height:400px;
15    margin:200px auto;
16 }
17.picbox{
18    float:left;
19    width:200px;
20    height:200px;
21    margin:auto;
22    margin:10px;
23    position:relative;
24/*⽗元素⾥⾯包含需要变换的内容，所以设置为3D变换*/
25    -webkit-transform-style: preserve-3d;
26    -moz-transform-style: preserve-3d;
27    -ms-transform-style: preserve-3d;
28    transform-style: preserve-3d;
29    transition:1.5s;
30/*设置在1.5s内完成变换*/
31 }
32.picbox:hover{
33    transform:rotateY(180deg);
34 }
35.box{
36    width:200px;
37    height:200px;
38    position:absolute
39    }
40.front{
41    border:2px solid #ddd;
42    box-shadow:10px 10px 10px #aaa;
43 }
44.back{
45    -webkit-transform: rotateY(180deg);
46    -ms-transform: rotateY(180deg);
47    -o-transform: rotateY(180deg);
48    transform: rotateY(180deg);
49    background: #8b4373;
50    border:2px solid #ddd;
51 }
52.back h2{
53    color: white;
54    text-align: center;
55 }
希望有所帮助~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。