网页翻转

transform中的rotate控制翻转角度而scale控制图片大小

 transition控制翻转的时间

通常有

  -webkit-transform:rotate(-20deg) scale(1);//
  -moz-transform:rotate(-20deg) scale(1);//防止网页不兼容
  transform:rotate(-20deg) scale(1);
  -webkit-transition:1s;
  -moz-transition:1s;
  transition:1s;

z-index 则控制图片的优先性

则出现在所有图片的上方

  border:1px solid #ddd;
  padding:10px;
  border-radius: 10px;
  background-color: #FFF;

控制使图片外围出现图片边框

以上配合伪类(:hover)可以实现网页翻转

posted @ 2018-10-21 15:46  星光之晨  阅读(406)  评论(0编辑  收藏  举报