<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .box{ margin-left: 100px; } .box div{ width: 100px; height: 100px; border:1px solid #ccc; text-align: center; display: table-cell; vertical-align: middle; margin-right: 20px; } .suofang:hover{ transform:scale(1.5,1.5); transition: 2s; /* scale(x,y) scale3d(x,y,z) scaleX(x) scaleY(y) scaleZ(z)*/ } .xuanzhuan{ border-top-color: red !important; border-bottom-color: blue !important; } .xuanzhuan:hover{ /*transform: rotate(180deg);*/ transform: rotate3d(0.5, 0.5, 1, 180deg); /*transform: rotateX(180deg);*/ /*transform: rotateY(180deg);*/ /* transform: rotateZ(180deg);*/ transition: 5s; } .huadong:hover{ transform:translate(200px,200px); transition: 2s; /* translate(x,y) translate3d(x,y,z) translateX(x) translateY(y) translateZ(z)*/ } .qingxie:hover{ width: 50px; height: 50px; transform: skew(45deg,50deg); /* transform: skewX(45deg); */ /*transform: skewY(45deg);*/ transition: 2s; } </style> </head> <body> <div class="box"> <div class="suofang" >缩放效果</div> <br> <div class="xuanzhuan">旋转</div> <br> <div class="huadong">滑动</div> <br> <div class="qingxie">倾斜</div> </div> </body> </html>