搜索到
146
篇与
的结果
-
48、多列布局 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>1、多列布局案例</title> <style> .outer{ width: 1000px; margin: 0 auto; /* 直接指定列数 */ column-count: 5; /* 指定每一列的宽度来计算 */ /* column-width: 250px; */ /* 调整列间距 */ /* column-gap: 50px; */ /* 每一列边框的风格虚线 */ column-rule-style: dashed; /* 每一列的边框颜色*/ column-rule-color: red; /* 边框相关复合属性 */ column-rule:1 ; } h1{ column-span: all; text-align: center; font-size: 50px; } </style> </head> <body> <div class="outer"> <h1>《震惊！坤哥来学前端了！》</h1> <p>...</p> </div> </body> </html> -
47、动画 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> .outer{ width: 1000px; height: 100px; border: 1px solid black; } /* 定义一个动画（定义一组关键帧）--第一种方式 */ @keyframes wangyoudong { /* 第一帧 */ from{ } /* 最后一针 */ to{ transform: translate(900px); background-color: red; } } /* 定义一个动画（定义一组关键帧）--第二种方式 */ @keyframes wangyoudong2{ /* 第一帧 */ 0%{ } /* 29%{ background-color: red; } 48%{ background-color: orange; } 88%{ background-color: yellow; } */ /* 最后一帧 */ 100%{ transform: translate(900px) rotate(360deg); background-color: purple; border-radius: 50%; } } .inner{ width: 100px; height: 100px; background-color: deepskyblue; /* 应用动画到元素 */ animation-name: wangyoudong2; /* 动画持续的时间 */ animation-duration: 3s; /* 动画的延迟时间 */ animation-delay: 0.2s; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>2、其他属性 <!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> .outer{ width: 200px; height: 1000px; } /* 定义一个动画（定义一组关键帧）--第一种方式 */ @keyframes wangyoudong2 { /* 第一帧 */ from{ } /* 最后一针 */ to{ transform: translateY(900px) rotate(360deg); background-color: purple; border-radius: 50%; } } .inner{ width: 200px; height: 200px; /* 应用动画到元素 */ animation-name: wangyoudong2; /* 动画持续的时间 */ animation-duration: 4s; /* 动画的延迟时间 */ animation-delay: 0.2s; /* ****其他属性--start***** */ /* 设置动画的方式 */ animation-timing-function: linear; /* 动画播放的次数 */ animation-iteration-count: infinite; /* 动画的方向 */ animation-direction: alternate; /* 动画以外的状态（不发生动画的时候在哪里） */ /* animation-fill-mode: forwards; */ /* 动画的播放状态 */ } .outer:hover .inner{ animation-play-state: paused; } </style> </head> <body> <div class="outer"> <img src="/周渝皓的个人网站/tp/love.png" class="inner"> </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> .outer{ width: 1000px; height: 100px; border: 1px solid black; } /* 定义一个动画（定义一组关键帧）--第一种方式 */ @keyframes wangyoudong2 { /* 第一帧 */ from{ } /* 最后一针 */ to{ transform: translate(900px) rotate(360deg); background-color: purple; border-radius: 50%; } } .inner{ width: 100px; height: 100px; background-color: deepskyblue; animation: wangyoudong2 3s 0.5s linear 2 alternate-reverse forwards; } .outer:hover .inner{ /* 暂停单独用 */ animation-play-state: paused; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>动画与过渡的区别 <!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> .outer{ width: 1000px; height: 200px; border: 1px solid black; } .inner{ width: 100px; height: 100px; } /* 用过度实现inner1跑到右边去 */ .inner1{ background-color: orange; transition: 3s linear; } .outer:hover .inner1{ transform: translate(900px); } /* 用动画实现inner2跑到右边去 */ @keyframes atzhou{ 0%{ } 100%{ transform: translate(900px); } } .inner2{ background-color: green; animation:atzhou 3s linear forwards; } </style> </head> <body> <div class="outer"> <div class="inner inner1">过渡</div> <div class="inner inner2">动画</div> </div> </body> </html>
-
46、过渡 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> .box1{ width: 200px; height: 200px; background-color: orange; opacity: 0.5; /* 设置哪个属性需要过渡效果 */ transition-property: height,width; /* 让所有能过渡的属性过渡 */ /* 设置过渡的时间 */ /* 分别设置 */ /* transition-duration: 1s,5s; */ /* 一个 */ transition-duration: 1s; } .box1:hover{ height: 400px; width: 400px; background-color: green; transform: rotate(45deg); box-shadow: 0px 0px 20px black; opacity: 1; } </style> </head> <body> <div class="box1"></div> </body> </html>2、高级使用 <!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> .outer{ width: 1300px; height: 900px; border: 1px solid black; } .outer:hover .box{ width: 1300px; } .box{ width: 200px; height: 100px; /* 让所有能过渡的属性，都过渡 */ /* 设置哪个属性需要过渡效果 */ transition-duration: all; /* 设置一个时间，所有人都用 */ /* 一个 */ transition-duration: 5s; /* 过渡延迟 */ /* transition-delay: 2s; */ } .box1 { background-color: skyblue; /*平滑过渡 transition-timing-function: ease; */ } .box2 { background-color: orange; transition-timing-function: linear; } .box3 { background-color: gray; transition-timing-function: ease-in; } .box4 { background-color: tomato; transition-timing-function: ease-out; } .box5 { background-color: green; transition-timing-function: ease-in-out; } .box6 { background-color: purple; transition-timing-function: step-start; } .box7 { background-color: chocolate; transition-timing-function: step-end; } .box8 { background-color: skyblue; transition-timing-function: steps(20,end); } .box9 { background-color: black; transition-timing-function: cubic-bezier(.88,1.03,.78,1.24); color: white; } </style> </head> <body> <div class="outer"> <div class="box box1">ease(慢，块，慢)</div> <div class="box box2">linear(匀速)</div> <div class="box box3">ease-in(先慢后快)</div> <div class="box box4">ease-out(块，慢)</div> <div class="box box5">ease-in-out(慢，块，慢)</div> <div class="box box6">step-start(不考虑过渡时间，直接终点)</div> <div class="box box7">step-end(考虑过渡时间，无过渡效果，过渡时间到了以后，瞬间到达)</div> <div class="box box8">steps()(分布过渡)end慢一下，start快一下</div> <div class="box box9">cubic-bezier.com贝塞尔曲线</div> </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> .outer{ width: 1000px; height: 100px; border: 1px solid black; } .inner{ width: 100px; height: 100px; background-color: orange; transition: 3s all linear; } .outer:hover .inner{ width: 1000px; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>4、案列 <!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>Document</title> <style> .outer{ width: 400px; height: 225px; position: relative; overflow: hidden; } .mask{ width: 400px; height: 225px; background-color: black; color: white; position: absolute; top: 0; left: 0; text-align: center; line-height: 225px; font-size: 100px; opacity: 0; transition: 1s linear all; } .outer:hover .mask{ opacity: 0.5; } .outer:hover img{ transform: scale(1.6) rotate(20deg); } img{ transition: 0.5s linear; } </style> </head> <body> <div class="outer"> <img src="./tp/djsy2.jpg" alt=""> <div class="mask">桐人</div> </div> </body> </html>
-
45、3D变换 1、3D空间与景深<!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>3D空间与景深</title> <style> /* 变换原点 1.元素变换时，默认的原点是元素的中心，使用transform-orgin可以设置变换的原点 2.修改变换原点对位移没有影响，对旋转和缩放就会产生影响。 3.如果只提供一个，若是像素值，表示横坐标，纵坐标取50%；若是关键词，则另一个坐标取50% */ .outer{ width: 200px; height: 200px; border: 2px solid black; margin:0 auto ; margin-top: 100px; position: relative; /* 开启3D空间 */ /* transform:flat;扁平化 */ /* perspective设置给发生3D变换元素的父元素 */ transform-style: preserve-3d; /* 设置景深(有了透视效果，近大远小) */ perspective: 100px; } .son{ width: 200px; height: 200px; background-color: deepskyblue; transform: rotateX(3deg); } </style> </head> <body> <div class="outer"> <div class="son"> </div> </div> </div> </body> </html>2、透视点位置 <!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>3D空间与景深</title> <style> /* 通常情况下，我们不需要调整透视点位置 */ .outer{ width: 200px; height: 200px; border: 2px solid black; margin:0 auto ; margin-top: 100px; position: relative; /* 开启3D空间 */ /* transform:flat;扁平化 */ /* perspective设置给发生3D变换元素的父元素 */ transform-style: preserve-3d; /* 设置景深(有了透视效果，近大远小) */ perspective: 500px; /* 设置透视点的位置 */ perspective-origin: 102px 102px; } .son{ width: 200px; height: 200px; background-color: deepskyblue; transform: rotateX(45deg); } </style> </head> <body> <div class="outer"> <div class="son">你好啊</div> </div> </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>3D位移</title> <style> /* 通常情况下，我们不需要调整透视点位置 */ .outer{ width: 200px; height: 200px; border: 2px solid black; margin:0 auto ; margin-top: 100px; position: relative; /* 开启3D空间 */ /* transform:flat;扁平化 */ /* perspective设置给发生3D变换元素的父元素 */ transform-style: preserve-3d; /* 设置景深(有了透视效果，近大远小) */ perspective: 500px; /* 设置透视点的位置 */ /* 默认值 */ perspective-origin: 102px 102px; } .son{ width: 200px; height: 200px; background-color: rgba(0, 191, 255, 0.726); /* 设置z轴位移，需指定长度值，正值向屏幕外，负值向屏幕里，且不能写百分比 */ /* transform: translateZ(200px); */ transform: translate3d(100px,100px,200px); box-shadow: 0px 0px 10px black; } </style> </head> <body> <div class="outer"> <div class="son">你好啊</div> </div> </div> </body> </html>4、旋转 <!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>3D旋转</title> <style> /* 通常情况下，我们不需要调整透视点位置 */ .outer{ width: 200px; height: 200px; border: 2px solid black; margin:0 auto ; margin-top: 100px; position: relative; /* 开启3D空间 */ /* transform:flat;扁平化 */ /* perspective设置给发生3D变换元素的父元素 */ transform-style: preserve-3d; /* 设置景深(有了透视效果，近大远小) */ perspective: 500px; /* 设置透视点的位置 */ /* 默认值 */ perspective-origin: 102px 102px; } .son{ width: 200px; height: 200px; background-color: rgba(0, 191, 255, 0.726); /* transform: rotateX(-45deg); */ /* rotateX 设置x轴旋转角度，需指定一个角度值（deg）面对x轴正方向，正值顺时针，负值逆时针 */ /* transform: rotateY(35deg); */ /* 设置Y轴旋转角度，需指定一个角度值（deg），面对y轴正方向：正直顺时针，负值逆时针 */ /* rotate3D 前3个参数分别表示坐标轴：x，y，z，第4个参数表示旋转的角度，参数不允许省略。 例如：transform:rotate3D(1,1,1,30deg),意思是：x，y，z分别旋转30度;*/ /* transform: rotate3d(30deg,30deg); */ transform: rotate3d(1,1,1,30deg); } </style> </head> <body> <div class="outer"> <div class="son">你好啊</div> </div> </div> </body> </html>5、缩放 <!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>3D缩放</title> <style> /* 通常情况下，我们不需要调整透视点位置 */ .outer{ width: 200px; height: 200px; border: 2px solid black; margin:0 auto ; margin-top: 100px; position: relative; /* 开启3D空间 */ /* transform:flat;扁平化 */ /* perspective设置给发生3D变换元素的父元素 */ transform-style: preserve-3d; /* 设置景深(有了透视效果，近大远小) */ perspective: 500px; /* 设置透视点的位置 */ /* 默认值 */ perspective-origin: 102px 102px; } .son{ width: 200px; height: 200px; background-color: rgba(0, 191, 255, 0.726); /* 125 */ /* transform: scaleZ(1) rotateY(45deg); */ transform: scale3d(1.5,1.5,4) rotateY(45deg); } </style> </head> <body> <div class="outer"> <div class="son">你好啊</div> </div> </div> </body> </html>6、多重变换 <!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>6、多重变换</title> <style> /* 通常情况下，我们不需要调整透视点位置 */ .outer{ width: 200px; height: 200px; border: 2px solid black; margin:0 auto ; margin-top: 100px; position: relative; /* 开启3D空间 */ /* transform:flat;扁平化 */ /* perspective设置给发生3D变换元素的父元素 */ transform-style: preserve-3d; /* 设置景深(有了透视效果，近大远小) */ perspective: 500px; /* 设置透视点的位置 */ /* 默认值 */ perspective-origin: 102px 102px; } .son{ width: 200px; height: 200px; background-color: rgba(0, 191, 255, 0.726); /* 变换原点 */ /* transform: origin 202px 180px; */ /* transform: rotateY(-45deg); */ /* 多重变换时，建议最后旋转 */ transform: translateZ(100px) scaleZ(3) rotateY(45deg); } </style> </head> <body> <div class="outer"> <div class="son">你好啊</div> </div> </div> </body> </html>7、背部可见性 <!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>7、背部可见性</title> <style> /* 通常情况下，我们不需要调整透视点位置 */ .outer{ width: 200px; height: 200px; border: 2px solid black; margin:0 auto ; margin-top: 100px; position: relative; /* 开启3D空间 */ /* transform:flat;扁平化 */ /* perspective设置给发生3D变换元素的父元素 */ transform-style: preserve-3d; /* 设置景深(有了透视效果，近大远小) */ perspective: 500px; /* 设置透视点的位置 */ /* 默认值 */ perspective-origin: 102px 102px; } .son{ width: 200px; height: 200px; background-color: rgba(0, 191, 255, 0.726); transform: rotateY(odeg); /* 隐藏背部 */ backface-visibility: hidden; } </style> </head> <body> <div class="outer"> <div class="son">你好啊</div> </div> </div> </body> </html>
-
44、2D变化 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> /* 1.位移与相对定位很相似，都不脱离文档流，不会影响到其他元素。 2与当对定位的区别：相对定位的百分比值，参考的是父元素；定位的百分比值，参考的是其自身。 3.浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高 4.位移配合定位，可实现元素水平垂直居中 位移对行内元素无效 */ .outer{ width: 200px; height: 200px; border: 2px solid black; margin:0 auto ; margin-top: 100px; position: relative; } .son{ width: 200px; height: 200px; background-color: deepskyblue; /* 水平位移 */ /* transform: translateX(-50%); */ /* 垂直位移 */ /* transform: translateY(-50%); */ /* 水平垂直位移 */ /* transform: translate(50%,50%); */ } .son2{ 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="son">你好啊</div> </div> <div class="outer"> <div class="son2">你好啊</div> </div> </body> </html>2、缩放<!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> /* 位移： 1.位移与相对定位很相似，都不脱离文档流，不会影响到其他元素。 2与当对定位的区别：相对定位的百分比值，参考的是父元素；定位的百分比值，参考的是其自身。 3.浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高 4.位移配合定位，可实现元素水平垂直居中 缩放： 1.scale的值，是支持写负数的，但几乎不用，因为容易让人产生误解 2.借助缩放，可实现小于12px的文字。 位移对行内元素无效 */ .outer{ width: 200px; height: 200px; border: 2px solid black; margin:0 auto ; margin-top: 100px; } .son{ width: 200px; height: 200px; background-color: deepskyblue; /*水平横向缩放*/ /* transform: scaleX(1。5); */ /* 纵向缩放 */ /* transform: scaleY(0.5); */ /*同时都缩放*/ transform: scale(1.5); } </style> </head> <body> <div class="outer"> <div class="son">你好啊</div> </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> /* 位移： 1.位移与相对定位很相似，都不脱离文档流，不会影响到其他元素。 2与当对定位的区别：相对定位的百分比值，参考的是父元素；定位的百分比值，参考的是其自身。 3.浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高 4.位移配合定位，可实现元素水平垂直居中 缩放： 1.scale的值，是支持写负数的，但几乎不用，因为容易让人产生误解 2.借助缩放，可实现小于12px的文字。 旋转： rotateZ(20deg) 相当于rotate(20deg),当然到了3D变换的时候，还能写：rotate(x,x,x) 位移对行内元素无效 */ .outer{ width: 200px; height: 200px; border: 2px solid black; margin:0 auto ; margin-top: 100px; } .son{ width: 200px; height: 200px; background-color: deepskyblue; /*正数顺时针旋转，负数逆时针旋转*/ /* transform: rotateZ(-30deg); */ transform: rotate(30deg); } </style> </head> <body> <div class="outer"> <div class="son">你好啊</div> </div> </body> </html>4、扭曲!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> /* 位移： 1.位移与相对定位很相似，都不脱离文档流，不会影响到其他元素。 2与当对定位的区别：相对定位的百分比值，参考的是父元素；定位的百分比值，参考的是其自身。 3.浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高 4.位移配合定位，可实现元素水平垂直居中 缩放： 1.scale的值，是支持写负数的，但几乎不用，因为容易让人产生误解 2.借助缩放，可实现小于12px的文字。 旋转： rotateZ(20deg) 相当于rotate(20deg),当然到了3D变换的时候，还能写：rotate(x,x,x) 位移对行内元素无效 */ .outer{ width: 200px; height: 200px; border: 2px solid black; margin:0 auto ; margin-top: 100px; } .son{ width: 200px; height: 200px; background-color: deepskyblue; /* transform: skewX(30deg); */ /* transform: skewY(30deg); */ /*写一个值按x轴扭曲*/ transform: skew(30deg,30deg); } </style> </head> <body> <div class="outer"> <div class="son">你好啊</div> </div> </body> </html>5、多重变换 <!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> .outer{ width: 200px; height: 200px; border: 2px solid black; margin:0 auto ; margin-top: 100px; } .son{ width: 200px; height: 200px; background-color: deepskyblue; /*注意：多重交换时，建议最后旋转*/ transform: translate(100px,100px) rotate(30deg); } </style> </head> <body> <div class="outer"> <div class="son">你好啊</div> </div> </body> </html>6、变换原点<!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> /* 变换原点 1.元素变换时，默认的原点是元素的中心，使用transform-orgin可以设置变换的原点 2.修改变换原点对位移没有影响，对旋转和缩放就会产生影响。 3.如果只提供一个，若是像素值，表示横坐标，纵坐标取50%；若是关键词，则另一个坐标取50% */ .outer{ width: 200px; height: 200px; border: 2px solid black; margin:0 auto ; margin-top: 100px; position: relative; } .son{ width: 200px; height: 200px; background-color: deepskyblue; /*通过关键词调整变换原点*/ /* transform-origin: left top; */ /*通过具体像素值调整变换原点*/ /* transform-origin: 50px 50px; */ /*通过百分比调整变换原点*/ /* transform-origin: 25% 25%; */ /* 只给一个值 */ /* transform-origin: left; */ /* transform-origin: left top; */ /*变换原点位置的改变对 旋转 有影响*/ /* transform: rotate(0deg); */ /*变换原点位置的改变对 缩放 有影响*/ /* transform: scale( 0.3); */ /* 变换原点位置的改变对 位移 没有影响 */ /* transform: translate(100px 100px); */ } .test{ width: 50px; height: 50px; background-color: orange; } </style> </head> <body> <div class="outer"> <div class="son"> <div class="test">你好啊</div> </div> </div> </div> </body> </html>
