css实现图片翻转效果

直接上代码

html部分

 <div class="box">

    <!--反面-->

    <view class="back">

      <img class="back-img" src="" />

    </view>

    <!--正面-->

    <view class="front">

      <image class="front-img" src="" />

    </view>

  </div>

css部分

.box {

    position: relative;

    width: 146px;

    height: 223px;

    background: black;

  }

  .back,.front {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    perspective: 500;

    -webkit-perspective: 500;

    backface-visibility: hidden;

    transition: all 1.5s;

  }

 

  .front {

    background: green;

  }

 

.back {

    background: red;

    transform: rotateY(-180deg);

    -webkit-transform: rotateY(-180deg);

  }

 

  .box:hover .front {

    transform: rotateY(-180deg);

    -webkit-transform: rotateY(-180deg);

  }

 

  .box:hover .back {

    transform: rotateY(-360deg);

    -webkit-transform: rotateY(-360deg);

  }

backface-visibility: hidden; 该属性定义当元素不面向屏幕时是否可见

perspective 属性定义 3D 元素距视图的距离  简单来说加上它 视觉上就会有一种3d的感觉