2D变换的位移/缩放/旋转/扭曲[了解]/多重变换/变换原点等Ⅰ、位移其一、代码为其二、结果为Ⅱ、缩放其一、代码为其二、结果为Ⅲ、旋转其一、代码为其二、结果为Ⅳ、扭曲(了解)其一、代码为其二、结果为Ⅴ、多重变换其一、代码为其二、结果为Ⅵ、变换原点其一、代码为其二、结果为Ⅶ、小结Ⅰ、位移其一、代码为!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title01_位移/titlestyle.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/headbodydivclassouterdivclassinner你好啊/div/divdivclassouterdivclassinner2你好啊/div/div/body/html其二、结果为//一进入页面后的页面Ⅱ、缩放其一、代码为!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title02_缩放/titlestyle.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/headbodydivclassouterdivclassinner你好啊/div/divspan好/span/body/html其二、结果为//一进入页面后的页面Ⅲ、旋转其一、代码为!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title03_旋转/titlestyle.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/headbodydivclassouterdivclassinner你好啊/div/div/body/html其二、结果为//一进入页面后的页面Ⅳ、扭曲(了解)其一、代码为!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title04_扭曲_了解/titlestyle.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/headbodydivclassouterdivclassinner你好啊/div/div/body/html其二、结果为//一进入页面后的页面Ⅴ、多重变换其一、代码为!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title05_多重变换/titlestyle.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/headbodydivclassouterdivclassinner你好啊/div/div/body/html其二、结果为//一进入页面后的页面Ⅵ、变换原点其一、代码为!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title05_多重变换/titlestyle.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/headbodydivclassouterdivclassinnerdivclasstest你好啊/div/div/div/body/html其二、结果为//一进入页面后的页面Ⅶ、小结其一、哪里有不对或不合适的地方还请大佬们多多指点和交流其二、若有转发或引用本文章内容请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易且行且珍惜其三、有兴趣的话可以多多关注这个专栏(Vue(Vue2Vue3)面试必备专栏)(直接点击下面 url 跳转)https://blog.csdn.net/weixin_43405300/category_11525646.html?spm1001.2014.3001.5482其四、再有兴趣的话也可以多多关注这个专栏(Java)(直接点击下面 url 跳转)https://blog.csdn.net/weixin_43405300/category_12654744.html?spm1001.2014.3001.5482