写文章

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翻转效果就介绍到这了。

回复

我来回复

  • 暂无回复内容