搜索到
47
篇与
的结果
-
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>
-
43、不透明性 <!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>opacity</title> <style> .box1{ width: 200px; height: 200px; background-color: orange; font-size: 40px; opacity: 0.5; font-weight: bold; } </style> </head> <body> <div class="box1">你好啊</div> </body> </html>
-
41、怪异盒子的使用 <!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> .father{ width: 900px; height: 300px; background-color: yellow; margin: 0 auto; } .box div{ width: 300px; height: 300px; float: left; text-align: center; } </style> </head> <body> <div class="father"> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet nesciunt consectetur voluptate assumenda! Bland itiis perferendis sed ducimus, atque in eaque porro ipsa dig nissimos, nisi beatae dolore fugiat, molestias architecto?</div> <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae commodi eligendi incidunt, minima ipsam necessitatib s? Quos nulla ipsum doloremque earum libero. Est aliquam eu m ullam nesciunt, voluptatibus dolores error dolorem.</div> <div>Lorem ipsum dolor sit amet consectetur adipisicin g elit. Accusantium tenetur veniam quam ratione ver ? Deserunt aliquid accusantium aliquam fugit sed in s unt, explicabo tenetur earum aspernatur cupiditate aut amet maxime.</div> </div> </body> </html>
-
40、怪异盒子 <!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-sizing 可选值： content-box{默认值} border-box｛挤压内部｝ */ .box1{ width: 200px; height: 200px; background-color: red; padding: 30px; border: 10px solid black; /*标准盒模型*/ box-sizing: content-box; } .box2{ width: 200px; height: 200px; background-color: green; margin-top: 100px; padding: 30px; border: 10px solid black; /*怪异盒模型*/ box-sizing: border-box; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
