js transform案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="guest-item">
    <div class="img-header">
      <img alt="nanfeng" src="guest-img1.png">
      <div class="header-bg"></div>
    </div>
    <div class="text">
      <h3>南风</h3>
      <p>全球产品与标准副总裁</p>
    </div>
  </div>

</body>
<style>
  .guest-item .img-header {
    margin: 0 auto;
    text-align: center;
    position: relative;
    width: 182px;
    height: 182px;
    cursor: pointer;
  }

  .guest-item .img-header img {
    display: inline-block;
    width: 120px;
    height: 120px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    margin-top: -60px;
    margin-left: -60px;
    border-radius: 100%;
    transition: all 0.5s ease-out;
  }

  .guest-item .header-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url('guest-bg.png') no-repeat center top;
    -webkit-transition: -webkit-transform 0.6s ease-out;
    -moz-transition: -moz-transform 0.6s ease-out;
    -o-transition: -o-transform 0.6s ease-out;
    -ms-transition: -ms-transform 0.6s ease-out;
  }

  .guest-item:hover .header-bg {
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
  }

  .guest-item:hover .img-header img {
    transform: scale(1.1);
  }

  .text {
    text-align: center;
  }
</style>

</html>

js transform案例

兰亭

引用和评论

Linux centos7 使用mail发邮件

100个React最佳实践小技巧

前端如何入门 Go 语言

前端开发工具

开发插件集合

Javascript(turfjs)等值线图绘制

JS校验身份证号