(点击图片进入关卡)
使用变换旋转，缩放或移动元素！
简介
transform 用于对元素应用独特的效果。
img {
transform: rotate(180deg) scale(3) translateX(-20px);
}
默认代码
<!-- "transform" CSS用于修改元素。 -->
<!-- 使用它来旋转、缩放或转化（移动）标签！ -->
<style>
#imgA {
/* 旋转需要一个单位，比如"deg"。 */
/* "deg"是 "degrees"（度数）的简写。 */
transform: rotate(45deg);
}
#imgB {
/* 将大小乘以一个值从而进行缩放！ */
transform: scale(0.5);
}
#imgC {
/* 元素可以在X和Y中"translate"d */
/* "translate"是"move"的另一个词。 */
transform: translateY(100px);
}
#imgD {
/* 这就是如何同时进行多个转换。 */
transform: rotate(-45deg) scale(1.5);
}
#imgE {
/* 将转换属性添加到该元素： */
}
#imgF {
/* 将转换属性添加到该元素： */
}
#imgG {
/* 将转换属性添加到该元素： */
}
#imgH {
/* 将转换属性添加到该元素： */
}
img {
margin-bottom:20%;
20%;
}
</style>
<img id="imgA" src=
"/file/db/thang.type/5466d4f2417c8b48a9811e87/portrait.png">
<img id="imgB" src=
"/file/db/thang.type/52e95b4222efc8e70900175d/portrait.png">
<img id="imgC" src=
"/file/db/thang.type/55652fb3b9effa46a1f775fd/portrait.png">
<img id="imgD" src=
"/file/db/thang.type/55e1a6e876cb0948c96af9f8/portrait.png">
<img id="imgE" src=
"/file/db/thang.type/575848b522179b2800efbfbf/portrait.png">
<img id="imgF" src=
"/file/db/thang.type/57588f09046caf2e0012ed41/portrait.png">
<img id="imgG" src=
"/file/db/thang.type/529ec584c423d4e83b000014/portrait.png">
<img id="imgH" src=
"/file/db/thang.type/52e9adf7427172ae56002172/portrait.png">
概览
＃ 变换
transform CSS属性将特定的方法应用于元素的布局。 用它可以扭转、变换得到独特的元素呈现方式！
img {
transform：rotate（30deg）scale（2）translateX（100px）;
}
＃旋转
rotate 使元素旋转一定的量。它需要一个类型为 deg 的单位（deg表示度degree）。
img {
transform: rotate(-40deg);
}
＃平移
translateX 和 translateY 分别向左/右和上/下移动元素。
img {
transform: translateY(-100px);
}
＃缩放
scale 可以使元素变大（若数字> 1）或变小（若数字<1）
img {
transform: scale(0.25);
}
变换性质 解法
<!-- "transform" CSS用于修改元素。 -->
<!-- 使用它来旋转、缩放或转化（移动）标签！ -->
<style>
#imgA {
/* 旋转需要一个单位，比如"deg"。 */
/* "deg"是 "degrees"（度数）的简写。 */
transform: rotate(45deg);
}
#imgB {
/* 将大小乘以一个值从而进行缩放！ */
transform: scale(0.5);
}
#imgC {
/* 元素可以在X和Y中"translate"d */
/* "translate"是"move"的另一个词。 */
transform: translateY(100px);
}
#imgD {
/* 这就是如何同时进行多个转换。 */
transform: rotate(-45deg) scale(1.5);
}
#imgE {
/* 将转换属性添加到该元素： */
transform: rotate(-45deg) translateY(100px);
}
#imgF {
/* 将转换属性添加到该元素： */
transform: scale(1.5) translateY(100px);
}
#imgG {
/* 将转换属性添加到该元素： */
transform: scale(1.5) rotate(-45deg);
}
#imgH {
/* 将转换属性添加到该元素： */
transform: rotate(-45deg);
}
img {
margin-bottom:20%;
20%;
}
</style>
<img id="imgA" src=
"/file/db/thang.type/5466d4f2417c8b48a9811e87/portrait.png">
<img id="imgB" src=
"/file/db/thang.type/52e95b4222efc8e70900175d/portrait.png">
<img id="imgC" src=
"/file/db/thang.type/55652fb3b9effa46a1f775fd/portrait.png">
<img id="imgD" src=
"/file/db/thang.type/55e1a6e876cb0948c96af9f8/portrait.png">
<img id="imgE" src=
"/file/db/thang.type/575848b522179b2800efbfbf/portrait.png">
<img id="imgF" src=
"/file/db/thang.type/57588f09046caf2e0012ed41/portrait.png">
<img id="imgG" src=
"/file/db/thang.type/529ec584c423d4e83b000014/portrait.png">
<img id="imgH" src=
"/file/db/thang.type/52e9adf7427172ae56002172/portrait.png">