搜索到
1
篇与
的结果
-
3D变换 1. 3D空间与景深<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>3D空间与景深</title> <style> .outer { width: 200px; height: 200px; border: 2px solid black; margin: 0 auto; margin-top: 100px; /* 开启3D空间 */ transform-style: preserve-3d; /* 设置景深（有了透视效果，近大远小） */ perspective: 500px; } .inner { width: 200px; height: 200px; background-color: skyblue; transform: rotateX(30deg); } </style> </head> <body> <div class="outer"> <div class="inner">你好</div> </div> </body> </html>2. 透视点的位置<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>透视点的位置</title> <style> /* 默认透视点在开启元素的正中心 */ .outer { width: 200px; height: 200px; border: 2px solid black; margin: 0 auto; margin-top: 100px; /* 开启3D空间 */ transform-style: preserve-3d; /* 设置景深（有了透视效果，近大远小） */ perspective: 500px; /* 设置透视点的位置 */ /* 相对坐标轴往右偏移140px 往下偏移100px（相当于人蹲下了140像素，然后向右移动100像素看元素） */ perspective-origin: 140px 100px; } .inner { width: 200px; height: 200px; background-color: skyblue; transform: rotateX(30deg); } </style> </head> <body> <div class="outer"> <div class="inner">你好</div> </div> </body> </html>3. 位移<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>位移</title> <style> /* 默认透视点在开启元素的正中心 */ .outer { width: 200px; height: 200px; border: 2px solid black; margin: 0 auto; margin-top: 100px; /* 开启3D空间 */ transform-style: preserve-3d; /* 设置景深（有了透视效果，近大远小） */ perspective: 500px; /* 设置透视点的位置 */ perspective-origin: 140px 100px; } .inner { width: 200px; height: 200px; background-color: rgba(0, 191, 255, 0.6); /* transform: translateZ(200px); */ /* 只能写像素值，不能写百分比 */ transform: translate3D(100px, 100px, 200px); } </style> </head> <body> <div class="outer"> <div class="inner">你好</div> </div> </body> </html>4. 旋转<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>旋转</title> <style> .outer { width: 200px; height: 200px; border: 2px solid black; margin: 0 auto; margin-top: 100px; /* 开启3D空间 */ transform-style: preserve-3d; /* 设置景深（有了透视效果，近大远小） */ perspective: 500px; /* 设置透视点的位置 */ perspective-origin: 140px 100px; } .inner { width: 200px; height: 200px; background-color: rgba(0, 191, 255, 0.6); /* transform: rotateX(45deg); */ transform: rotateY(45deg); transform: rotate3D(1, 1, 1, 45deg) } </style> </head> <body> <div class="outer"> <div class="inner">你好</div> </div> </body> </html>5. 缩放<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>缩放</title> <style> .outer { width: 200px; height: 200px; border: 2px solid black; margin: 0 auto; margin-top: 100px; /* 开启3D空间 */ transform-style: preserve-3d; /* 设置景深（有了透视效果，近大远小） */ perspective: 500px; /* 设置透视点的位置 */ perspective-origin: 140px 100px; } .inner { width: 200px; height: 200px; background-color: rgba(0, 191, 255, 0.6); /* 设置z轴方向的缩放比例，1表示不缩放，大于1放大，小于1缩小 */ /* transform: scaleZ(1.2); */ /* 第一个参数x轴，第二个参数y轴，第三个参数z轴（参数不能省略） */ transform: scale3d(1.5, 1.5, 1) rotateY(45deg); } </style> </head> <body> <div class="outer"> <div class="inner">你好</div> </div> </body> </html>6. 多重变换<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>多重变换</title> <style> .outer { width: 200px; height: 200px; border: 2px solid black; margin: 0 auto; margin-top: 100px; /* 开启3D空间 */ transform-style: preserve-3d; /* 设置景深（有了透视效果，近大远小） */ perspective: 500px; /* 设置透视点的位置 */ perspective-origin: 140px 100px; } .inner { width: 200px; height: 200px; background-color: rgba(0, 191, 255, 0.6); /* transform-origin: left; transform: rotateY(45deg); */ /* 多重变换时，建议将旋转放到最后 */ transform: translateZ(100px) scaleZ(2) rotateY(45deg); } </style> </head> <body> <div class="outer"> <div class="inner">你好</div> </div> </body> </html>7. 背部可见性<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>背部可见性</title> <style> .outer { width: 200px; height: 200px; border: 2px solid black; margin: 0 auto; margin-top: 100px; /* 开启3D空间 */ transform-style: preserve-3d; /* 设置景深（有了透视效果，近大远小） */ perspective: 500px; /* 设置透视点的位置 */ perspective-origin: 140px 100px; } .inner { width: 200px; height: 200px; background-color: rgba(0, 191, 255, 0.6); transform: rotateY(45deg); /* 看不到背部 */ backface-visibility: hidden; } </style> </head> <body> <div class="outer"> <div class="inner">你好</div> </div> </body> </html>
