<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; } div { width: 100px; height: 100px; background-color: red; margin-left: 200px; margin-top: 10px; /* 添加过渡动画 css样式 名称 耗时*/ transition: transform 2s; } /* 移动translate */ div:first-of-type:active { /* 使用translate 可以实现元素的移动: a.移动参照元素的左上角 b.执行完毕以后恢复到原来的状态 如果是一个参数表示x轴 若果是两个参数就代表直角坐标系 */ /* 通常在设置的时候使用x和y */ transform: translateX(300px); transform: translateY(300px); } /* 缩放：scale */ div:nth-of-type(2):active { /* 大于1表示放大,小于1表示缩小 如果只有1个参数,就代表x/y方向都进行等比缩放 如果是两个参数就x/y方向 */ /* 通常使用x/y */ transform: scaleY(0.5); } /* 旋转:rotate */ div:nth-of-type(3):active { /* 设置旋转轴心 关键字:left top right bottom center */ background-color: purple; transform-origin: left top; } /* 同时给div3添加多个transform属性 */ div:nth-of-type(3):active { transform: translateX(700px) rotate(-90deg); } /* 斜切:skew */ div:nth-of-type(4):active { background-color: blue; /* 如果这个角度为正,则往当前负方向斜切 */ transform: skew(-30deg); } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </body> </html>