2D变换的位移/缩放/旋转/扭曲了解/多重变换/变换原点等：
Ⅰ、位移：
其一、代码为：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01_位移</title>
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
position: relative;
}
.inner {
width: 200px;
height: 200px;
background-color: deepskyblue;
/* 水平位移 */
/* transform: translateX(50px); */
/* 垂直位移 */
/* transform: translateY(50px); */
/* 水平+垂直位移 */
/* transform: translate(50px,50px); */
}
.inner2 {
width: 60px;
height: 60px;
background-color: orange;
position: absolute;
/* 居中操作 */
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好啊</div>
</div>
<div class="outer">
<div class="inner2">你好啊</div>
</div>
</body>
</html>其二、结果为：
// 一进入页面后的页面：
Ⅱ、缩放：
其一、代码为：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02_缩放</title>
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: deepskyblue;
transform: scale(1.5);
}
span {
display: inline-block;
font-size: 20px;
transform: scale(0.5);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好啊</div>
</div>
<span>好</span>
</body>
</html>其二、结果为：
// 一进入页面后的页面：
Ⅲ、旋转：
其一、代码为：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03_旋转</title>
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: deepskyblue;
/* 正值代表向着顺时针方向旋转 */
/* transform: rotateZ(-30deg); */
transform: rotate(30deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好啊</div>
</div>
</body>
</html>其二、结果为：
// 一进入页面后的页面：
Ⅳ、扭曲(了解)：
其一、代码为：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04_扭曲_了解</title>
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: deepskyblue;
/* 属性及方向不好把握，需仔细查看文档熟悉属性值 */
/* transform: skewX(-30deg); */
/* transform: skewY(30deg); */
/* transform: skewX(30deg) skewY(30deg); */
transform: skew(30deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好啊</div>
</div>
</body>
</html>其二、结果为：
// 一进入页面后的页面：
Ⅴ、多重变换：
其一、代码为：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05_多重变换</title>
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: deepskyblue;
/* 多重变换的顺序很重要：此时是正确操作顺序，一般是要把旋转放在最后，参考点才是正确的(未旋转的左上角) */
transform:translate(100px,100px) rotate(30deg);
/* transform:scale(0.5) translate(100px,100px); */
/* 先缩小为0.5，在执行 translate(100px,100px) 时其参考的原点是未缩放前的左上角，在做平移 */
/* transform:rotate(30deg) translate(100px,100px); */
/* 先旋转 30deg，再执行 translate(100px,100px) 时其参考的原点是旋转后图形的左上角，并不是未旋转前的左上角，切记！ */
/* 且此时再调整旋转的角度是参考未平移前旋转的中心，而不是此时平移后的中心，切记！ 因此一般要把旋转放在最后再操作 */
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好啊</div>
</div>
</body>
</html>其二、结果为：
// 一进入页面后的页面：
Ⅵ、变换原点：
其一、代码为：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05_多重变换</title>
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: deepskyblue;
/* transform-origin 用来设置元素变换（旋转、缩放、倾斜）的基准点，默认是元素的中心点 */
/* 通过关键词调整变换原点(如：右下角) */
/* transform-origin: right bottom; */
/* 通过具体像素值调整变换原点(如：绕距左50px、距顶50px的点变换) */
/* transform-origin: 50px 50px; */
/* 通过百分比调整变换原点(如：绕自定义百分比点变换) */
/* transform-origin: 25% 25%; */
/* 只给一个值 */
/* transform-origin:top; */
/* transform-origin: right top; */
/* 变换原点位置的改变对 旋转 有影响 */
/* transform: rotate(0deg); */
/* 变换原点位置的改变对 缩放 有影响 */
/* transform: scale(1.3); */
/* 变换原点位置的改变对 位移 没有影响 */
/* transform: translate(100px,100px) */
}
.test {
width: 50px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<div class="test">你好啊</div>
</div>
</div>
</body>
</html>其二、结果为：
// 一进入页面后的页面：
Ⅶ、小结：
其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、若有转发或引用本文章内容，请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易，且行且珍惜！
其三、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
其四、再有兴趣的话，也可以多多关注这个专栏(Java)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_12654744.html?spm=1001.2014.3001.5482