一、2D变形
1.1、旋转变形
transform: rotate(度数)-旋转角度，默认中心点旋转
介绍
含义：将transform属性的属性的值设置为rotate()，即可实现旋转变形。
语法：transform: rotate(度数)。角度正的顺时针旋转，负的逆时针旋转。饶中心点进行旋转。
demo
<style> * { padding: 0px; margin: 0px; } img { border: 1px solid #000; } /* 正数都是正向旋转，360d°表示旋转一整圈 */ img.img1 { transform: rotate(30deg); } img.img2 { transform: rotate(60deg); } img.img3 { transform: rotate(90deg); } img.img4 { transform: rotate(180deg); } img.img5 { transform: rotate(359deg); } </style> <body> <p> <img src="./elves.jpg" alt="" class="img1"> 30° </p> <p> <img src="./elves.jpg" alt="" class="img2"> 60° </p> <p> <img src="./elves.jpg" alt="" class="img3"> 90° </p> <p> <img src="./elves.jpg" alt="" class="img4"> 180° </p> <p> <img src="./elves.jpg" alt="" class="img5"> 359° </p> </body>
transform-origin属性(定义旋转点)
介绍
含义：若是不使用该属性，默认是以元素的中心为旋转点。
语法：transform-origin： 0px,0px，第一个参数是x轴，第二个参数是y轴，从元素的左上角开始。
通过定义x轴、y轴来进行确定旋转点：
演示
将旋转点设置为左上角：transform-origin: 0 0;，接着配合transform: rotate属性来进行测试
<style> * { padding: 0px; margin: 0px; } p { height: 80px; width: 1000px; border: 1px solid #000; text-align: center; margin-top: 50px; } img { border: 1px solid #000; } /* 正数都是正向旋转，360d°表示旋转一整圈 */ img.img1 { transform-origin: 0 0; transform: rotate(30deg); } </style> <body> <p> <img src="./elves.jpg" alt="" class="img1"> </p> </body>
1.2、缩放变形
transform: scale(数字)-缩小与放大
介绍
含义：能够指定的属性进行缩小与放大。
语法：transform: scale(3)。其中的数字没有单位，指的是缩放倍数，当数值小于1时，表示缩放元素；大于1时，表示放大元素。
demo1：演示缩小与放大效果
<style> * { padding: 0px; margin: 0px; } p { text-align: center; margin-top: 30px; } img.img2 { /* scale：指的是规模的意思。这里缩小为0.5倍 */ transform: scale(.5); } img.img3 { /* 这里放大为1.5倍 */ transform: scale(1.5); } </style> <body> <p> <img src="./elves.jpg" alt="" class="img1"> <img src="./elves.jpg" alt="" class="img2"> <img src="./elves.jpg" alt="" class="img3"> </p> </body>
demo2：触碰放大1.5倍
<style> * { padding: 0px; margin: 0px; } p { text-align: center; margin-top: 30px; } /* 图片被触碰时放大1.5倍 */ img:hover { transform: scale(1.5); } </style> <body> <p> <a href=""> <img src="./elves.jpg" alt="" class="img1"></a> </p> </body>
1.3、斜切变形
transform: skew(角度，角度)
介绍
含义：左右斜切与上下斜切。
语法：transform: skew(角度，角度)。(skew是斜的意思)第一个参数是横向扭曲，第二个参数是竖向扭曲。
demo
<style> * { padding: 0px; margin: 0px; } p { text-align: center; margin-top: 30px; } img { width: 100px; height: 100px; transform: skew(0deg, 0deg); } </style> <body> <p> <a href=""> <img src="./elves.jpg" alt="" class="img1"></a> </p> </body>
1.4、位移变形
transform：translate(px，px)
介绍
含义：实现元素进行位移，与相对定位的效果一致，兼容性比相对定位差，兼容到IE9。
语法：transform：translate(px，px)。第一个参数向右移动，第二个参数向下移动。
与相对定位非常想，位移变形也会"老家留坑"，效果显示在指定位置。
demo
<style> * { padding: 0px; margin: 0px; } div.box1 { width: 100px; height: 100px; border: 1px solid #000; background-color: red; } div.box2 { width: 100px; height: 100px; border: 1px solid #000; background-color: blue; /* 位移变形 */ transform: translate(200px, 0px); /* 使用外边距也会影响其他元素 */ margin-bottom: 20px; } div.box3 { width: 100px; height: 100px; border: 1px solid #000; background-color: yellow; } </style> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body>
