1、平面转换-多重转换
多重转换技巧：先平移再旋转
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>多重转换</title><style>.box {width: 800px;height: 200px;border: 1px solid #000;}img {width: 200px;transition: all 5s;}/* 鼠标移入box，图片边走边转 */.box:hover img {/* 先平移再旋转 */transform: translate(600px) rotate(360deg);/* 旋转会改变坐标轴向 *//* 多重转换：以第一种转换形态的坐标轴为准 *//* transform: rotate(360deg) translate(600px); *//* 层叠性 *//* transform: translate(600px);transform: rotate(360deg); */}</style></head><body><div class="box"><img src="./images/tyre1.png" alt="" /></div></body>
</html>
2、平面转换-缩放
属性
技巧：
- 通常，只为scale()设置一个值，表示X轴和Y轴等比例缩放
- 取值大于1表示放大，取值小于1表示缩小
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>缩放效果</title><style>.box {width: 300px;height: 210px;margin: 100px auto;background-color: pink;}.box img {width: 100%;transition: all 0.5s;}.box:hover img {/* 修改宽高尺寸，从左上角开始缩放 *//* width: 500px;height: 400px; *//* 大于1，表示放大 */transform: scale(2);/* 小于1，表示缩小 */transform: scale(0.5);/* 等于1，不变 */transform: scale(1);}</style></head><body><div class="box"><img src="./images/product.jpeg" alt="" /></div></body>
</html>
3、案例 播放特效
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>按钮缩放</title><style>* {margin: 0;padding: 0;}li {list-style: none;}img {width: 100%;}.box {width: 249px;height: 210px;margin: 50px auto; }.box p {color: #3b3b3b;padding: 10px 10px 0 10px;}/* 1. 摆放播放按钮：图片区域的中间 */.box li {overflow: hidden;}.pic {position: relative;}.pic::after {position: absolute;left: 50%;top: 50%;/* margin-left: -29px;margin-top: -29px; *//* transform: translate(-50%, -50%); */content: '';width: 58px;height: 58px;background-image: url(./images/play.png);transform: translate(-50%, -50%) scale(5);opacity: 0;transition: all .5s;}/* 2. hover效果：大按钮，看不见：透明是0 → 小按钮，看得见：透明度1 */.box li:hover .pic::after {transform: translate(-50%, -50%) scale(1);opacity: 1;}</style></head><body><div class="box"><ul><li><div class="pic"><img src="./images/party.jpeg" alt="" /></div><p>【和平精英】“初火”音乐概念片：四圣觉醒......</p></li></ul></div></body>
</html>
4、 平面转换-倾斜
取值：
- 角度度数deg
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>倾斜效果</title><style>div {margin: 100px auto;width: 100px;height: 200px;background-color: pink;transition: all 0.5s;}div:hover {transform: skew(30deg);transform: skew(-30deg);}</style></head><body><div></div></body>
</html>
