CSS3翻轉效果

螞蟻小編發表於2018-07-02
CSSS3
分享一段程式碼例項，它實現了元素的3D翻轉效果。

提供了多種型別的翻轉，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

相關文章