1.html
1 <div class="translate">1</div> 2 <div class="scale">2</div> 3 <div class="rotate">3</div> 4 <div class="skew">4</div>
2.css和介绍
1 <style> 2 *{ 3 margin: 0; 4 padding: 0; 5 } 6 .translate,.scale,.rotate,.skew{ 7 width: 100px; 8 height: 100px; 9 background-color: #ff1a23; 10 margin-left: 200px; 11 transition: transform 2s; 12 margin-bottom: 20px; 13 } 14 /*移动：translate */ 15 .translate:active{ 16 /*使用transform实现元素的移动 a.移动是参照元素的左上角 b.执行完毕之后会恢复到原始状态 17 1.如果只有一个参数就代表x方向 18 2.如果两个参数就代表x/y方向*/ 19 /*transform: translate(100px);*/ 20 /*transform: translate(200px,100px);*/ 21 /*添加水平方向或处置方向的移动*/ 22 /*transform: translateX(300px);*/ 23 transform: translateY(300px); 24 } 25 26 /*缩放：translate*/ 27 .scale:active{ 28 /*实现缩放 1指不缩放，>1放大 <1缩小 参照元素的几何中心 29 1.如果只是一个参数，就代表x和y方向都进行相等比例的缩放 30 2.如果有两个参数，就代表x/y方向*/ 31 /*transform: scale(2);*/ 32 /*transform: scale(2,1);*/ 33 /*缩放指定的方向*/ 34 /*transform: scaleX(0.5);*/ 35 transform: scaleY(0.5); 36 37 } 38 39 /*旋转：rotate*/ 40 .rotate:hover{ 41 42 /*设置旋转轴心 43 1.x y 44 2.transform-origin:left top right bottom center*/ 45 /*transform-origin: left top;*/ 46 47 /*正数为顺时针旋转，负数为逆时针旋转*/ 48 /*transform: rotate(30deg);*/ 49 50 /*旋转加移动*/ 51 transform: translateX(700px) rotate(180deg); 52 /*建议使用上一种顺序添加*/ 53 /*transform: rotate(-90deg) translateX(700px);*/ 54 } 55 56 /*斜切：skew*/ 57 .skew:hover{ 58 /*若果角度为证，则网当前轴的负方向斜切，反之则反*/ 59 /*transform: skew(30deg);*/ 60 /*transform: skew(30deg,-50deg);*/ 61 /*设置某个方向的斜切值*/ 62 /*transform: skewX(30deg);*/ 63 transform: skewY(30deg); 64 65 } 66 </style>