css怎么实现翻转效果

.block {

  width: 200px;

  height: 200px;

  cursor: pointer;

  /* 3D变形 */

  transform-style: preserve-3d;

  -webkit-perspective: 1000;

  -moz-perspective: 1000;

  -ms-perspective: 1000;

  perspective: 1000;

  &-in {

    background: brown;

    height: 100%;

    transition: 0.8s;

  }

  &:hover .block-in {

    transform: rotateY(180deg);

  }

}