经常能在展示案例logo的时候见到。logo原本是黑白色,鼠标移入时logo翻转成为彩色。
一、实现一张图片的翻转
一、HTML结构
<div class="stage">
<div class="flipBox">
<figure class="pic front">Front</figure>
<figure class="pic back">Back</figure>
</div>
</div>
上述HTML的结构是:
- div.stage规定了一个3D舞台,基本上所有使用CSS3 3D变换的实现都会这么做,规定perspective样式从而达到透视效果
- div.flipBox是真正实现翻面的容器,稍后将对它进行3D变换
- figure代表两张图片,一张是正面,一张是背面
思路是:将figure.front和figure.back作为翻转图片的正反面。图片翻转后,figure.back将变成面对用户的那一面,figure.front将背对用户。
初始状态下figure.back是水平翻转过的(即transform: rotateY(180deg)),这样图片翻转后背面的文字将正着显示(否则翻转过来以后背面的文字是倒着的——因为反转之前是正着的嘛~)。
二、CSS结构
body,figure {
margin: 0;
padding: 0;
}
.stage {
width: 200px;
height: 100px;
margin: 40px;
perspective: 1000px;
}
.flipBox {
width: 200px;
height: 100px;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
.pic {
width: 200px;
height: 100px;
font-size: 24px;
color: #fff;
line-height: 100px;
text-align: center;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}
.front {
background: #f00;
}
.back {
background: #090;
transform: rotateY(180deg);
}
现在分析每个元素的CSS:
body,figure {
margin: 0;
padding: 0;
}
没什么好说的,去掉内外边距!
.stage {
width: 200px;
height: