<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width:120px;
            height:120px;
            line-height:120px;
            margin: 20px;
            background-color: #5cb85c;
            float: left; font-size: 12px; text-align: center; color:orangered; Rotate (rotate)*/. Img1 {transition: All ease-in-out; - its - the transition: All 0.4 s ease - in-out; Moz - the transition: All 0.4 s ease - in-out; - o - the transition: All 0.4 s ease - in-out; } .img1:hover { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); } /* effect 2: scale(scale)*/. Img2 {transition: All 0.4s ease-in-out; - its - the transition: All 0.4 s ease - in-out; Moz - the transition: All 0.4 s ease - in-out; - o - the transition: All 0.4 s ease - in-out; }. Img2 :hover {transform: scale(1.2); - its - transform: scale (1.2); Moz - transform: scale (1.2); - o - transform: scale (1.2); - ms - transform: scale (1.2); Rotate (rotate) scale */. Img3 {transition: All ease-in-out; - its - the transition: All 0.4 s ease - in-out; Moz - the transition: All 0.4 s ease - in-out; - o - the transition: All 0.4 s ease - in-out; }. Img3 :hover {transform: rotate(360deg) scale(1.2); - its - transform: the rotate (360 deg) scale (1.2); Moz - transform: the rotate (360 deg) scale (1.2); - o - transform: the rotate (360 deg) scale (1.2); - ms - transform: the rotate (360 deg) scale (1.2); Img4 {transition: All 0.4s ease-in-out; - its - the transition: All 0.4 s ease - in-out; Moz - the transition: All 0.4 s ease - in-out; - o - the transition: All 0.4 s ease - in-out; } .img4:hover { transform: translate(0, -10px); -webkit-transform: translate(0, -10px); -moz-transform: translate(0, -10px); -o-transform: translate(0, -10px); -ms-transform: translate(0, -10px); } </style> </head> <body> <div class="img1"<div > <div class="img2"</div> <div class="img3"</div> <div class="img4"</div> </body> </ HTML >Copy the code

From: https://www.cnblogs.com/guozhe/p/5912664.html