一个css图片翻转练习

记录css练习

一个css图片翻转练习

1. 用到的主要属性是transform和transition
2. 属性：transform 向元素应用 2D 或 3D 转换。
3. 属性值： translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
4. 属性值：rotateY(angle) 定义沿 Y 轴的 3D 旋转。
5. 属性：transition 过渡属性。
6. transition-property 规定过渡效果所针对的 CSS 属性的名称。
7. transition-duration 规定过渡效果要持续多少秒或毫秒。

代码

<div class="nav">
    <div class="card">
      <img src="../img/01.png" alt="01" class="qian">
      <img src="../img/02.png" alt="02" class="hou">
    </div>
    <div class="card">
      <img src="../img/03.png" alt="03" class="qian">
      <img src="../img/04.png" alt="04" class="hou">
    </div>
    <div class="card">
      <img src="../img/05.png" alt="05" class="qian">
      <img src="../img/06.png" alt="06" class="hou">
    </div>
  </div>

.nav{
      width: 600px;
      height: 350px;
      margin: 120px auto;
      display: flex;
      justify-content: space-between;
    }
    .card{
      width: 180px;
      height: 350px;
      position: relative;
    }
    .qian{
      position: absolute;
      top: 0;
      left: 0;
      transform: rotateY(0deg);
      backface-visibility: hidden;/*面朝平面不可见*/
      -webkit-backface-visibility:hidden;
      transition: all 0.6s;
    }
    .card:hover .qian{
      transform: rotateY(180deg);
    }
    .hou{
      position: absolute;
      top: 0;
      left: 0;
      transform: rotateY(180deg);
      backface-visibility: hidden;
      transition: all .6s;
    }
    .card:hover .hou{
      transform: rotateY(0deg);
    }
    .nav div:nth-child(2n){
      transform:translateY(30px);
    }

效果图

• 鼠标移入每张图片，每张图片就会翻转