CSS3翻转效果

快乐打工仔 分类:实例代码

CSS3翻转效果属于前端实例代码,有关更多实例代码大家可以查看

分享一段代码实例,它实现了元素的3D翻转效果。

提供了多种类型的翻转,代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.container {
width: 90%;
padding: 5%;
height: 12rem;
display: flex;
justify-content: space-around;
}
.container > div {
width: 10rem;
height: 10rem;
}
img {
width: 100%;
height: 100%;
}
a {
transition: all 1s ease;
display: block;
height: 100%;
}
span {
color: #fff;
}
/*div1*/
.div1 span {
display: none;
height: 100%;
background-color: blue;
transform: rotateX(-180deg);
}
.a1:hover img {
display: none;
}
.a1:hover span {
display: block;
}
.a1:hover {
transform: rotateX(180deg) scale(.7,.7 );
}
/*div2*/
.div2 span {
display: none;
height: 100%;
background-color: blue;
transform: rotateY(-180deg);
}
.a2:hover img {
display: none;
}
.a2:hover span {
display: block;
}
.a2:hover {
transform: rotateY(180deg) scale(.7,.7 );
}
/*div3*/
.div3 {
perspective: 1000px;
}
.div3 a {
transform-style: preserve-3d;
transition: all .5s ease;
}
.div3 span {
display: block;
height: 160px;
background-color: blue;
transform-origin: 50% 0;
transform: rotateX(-90deg);
margin-top: -8px;
}
.a3:hover {
transform: rotateX(90deg) translate3d(0,-80px,80px);
}
/*div4*/
.div4 {
perspective: 1000px;
}
.div4 a {
transform-style: preserve-3d;
transition: all .5s ease;
}
.div4 span {
display: block;
height: 160px;
background-color: blue;
transform-origin: 50% 100%;
transform: translateY(-320px) rotateX(90deg);
}
.a4:hover {
transform: rotateX(-90deg) translate3d(0,80px,80px);
}
/*div5*/
.div5 {
perspective: 1000px;
}
.div5 a {
transform-style: preserve-3d;
transition: all .5s ease;
}
.div5 span {
display: block;
height: 160px;
background-color: blue;
transform-origin: 0 50%;
transform: translate(100%,-100%) rotateY(90deg);
margin-top: -3px;
}
.a5:hover {
transform: rotateY(-90deg) translate3d(-60px,0,80px);
}
/*div5*/
.div6 {
perspective: 1000px;
}
.div6 a {
transform-style: preserve-3d;
transition: all .5s ease;
}
.div6 span {
display: block;
height: 160px;
background-color: blue;
transform-origin: 100% 50%;
transform: translate(-100%,-100%) rotateY(-90deg);
margin-top: -3px;
}
.a6:hover {
transform: rotateY(90deg) translate3d(60px,0,80px);
}
</style>
</head>
<body>
<section class="container">
<div class="div1">
<a href="###" class="a1">
<img src="demo/CSS/img/100x100.png">
<span>轴向二维翻转</span>
</a>
</div>
<div class="div2">
<a href="###" class="a2">
<img src="demo/CSS/img/100x100.png">
<span>横向向二维翻转</span>
</a>
</div>
<div class="div3">
<a href="###" class="a3">
<img src="demo/CSS/img/100x100.png">
<span>3D上翻转</span>
</a>
</div>
</section>
<section class='container'>
<div class="div4">
<a href="###" class="a4">
<img src="demo/CSS/img/100x100.png">
<span>3D下翻转</span>
</a>
</div>
<div class="div5">
<a href="###" class="a5">
<img src="demo/CSS/img/100x100.png">
<span>3D右翻转</span>
</a>
</div>
<div class="div6">
<a href="###" class="a6">
<img src="demo/CSS/img/100x100.png">
<span>3D左翻转</span>
</a>
</div>
</section>
</body>
</html>

CSS3翻转效果,这样的场景在实际项目中还是用的比较多的,关于CSS3翻转效果就介绍到这了。

回复

我来回复
  • 暂无回复内容