css 3D 转换
2020年6月14日1. 3D转换有什么特点
- 近大远小
- 物体后面遮挡看不见
2. 三维坐标系
- x轴:向右 往右正值
- y轴:向下 往下是正值
- z轴:垂直屏幕 往屏幕外是正值
3.3D移动translate3d
3d于东在2d移动的基础上多加了一个可以移动的方向,就是Z轴方向
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
div{ width: 100px; height: 100px; background: red; /* 分写只有一个有效就是最后一个 */ transform: translateX(100px); transform: translateY(100px); transform: translateZ(100px); /*z轴只能使用px 如果想要translateZ在电脑上有效果需要借助 perspective (透视)属性 ,写在父盒子上*/ /* 合写三个都有效 */ transform: translateY(100px) translateX(100px) translateZ(100px); /*简写三个都有效 xyz 不能省略 没有就写0*/ transform: translate3d(100px ,100px ,100px); } |
4.透视 perspective
- 如果想要在网页产生3D效果需要透视
- 模拟人类视觉位置,可以为安排一只眼睛去看
- 透视我们也称为视距:视距就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大,越远越小
- 透视的单位是px
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
body{ perspective: 2000px; } div{ width: 100px; height: 100px; background: red; /* 分写只有一个有效就是最后一个 因为覆盖了*/ transform: translateX(100px); transform: translateY(100px); transform: translateZ(100px); /*z轴只能使用px 如果想要translateZ在电脑上有效果需要借助 perspective (透视)属性 ,写在父盒子上*/ /* 合写三个都有效 */ transform: translateY(100px) translateX(100px) translateZ(100px); /*简写三个都有效 xyz 不能省略 没有就写0*/ transform: translate3d(500px ,100px ,400px); } |
5.3d旋转
左手准则
- 左手的大拇指拇指向X(YZ)轴的正方向
- 其余手指弯曲的方向就是该元素沿着X(YZ)旋转的正方向
1 2 3 4 5 6 7 |
/*分写只有一个有效就是最后一个,因为覆盖了*/ transform: rotateX(180deg); transform: rotateY(180deg); transform: rotateZ(180deg); /*组合写*/ transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg); transform: rotate3d(1,0,0,45deg); /*前三个参数代表是否沿该轴旋转,最后一个代表旋转度数不常用*/ |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { perspective: 2000px; } div { margin: 200px auto; width: 100px; height: 100px; background: red; } div:hover { transition: all 1s; transform: rotateX(180deg); } </style> </head> <body> <div></div> </body> </html> |
6.transform-style控制子元素是否开启3D环境
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ width: 200px; height: 200px; margin: 200px auto; position: relative; perspective: 1000px; transform-style: preserve-3d; /*控制子元素是否开启3D环境,默认flat*/ } .box:hover{ transition: all 2s; /*应该是定义动画时间*/ transform: rotateY(30deg); } .box div{ width: 100%; height: 100%; position: absolute; top: 0; } .box div:first-child{ background: red; transform: rotateX(60deg); } .box div:last-child{ background: blue; } </style> </head> <body> <div class="box"> <div></div> <div></div> </div> </body> </html> |
7.旋转盒子小案例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 300px; height: 300px; margin: 200px auto; position: relative; transform-style: preserve-3d; } .box:hover{ transition: all 1s; transform: rotateY(180deg); } .box div{ width: 100%; height: 100%; border-radius: 50%; text-align: center; color: #fff; font-size: 15px; line-height: 300px; position: absolute; top: 0; left: 0; } .box div:first-child{ z-index: 1; background: red; } .box div:last-child{ background: blue; transform: rotateY(180deg); } </style> </head> <body> <div class="box"> <div> 旋转盒子</div> <div>张舫做</div> </div> </body> </html> |
8.旋转导航小案例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ul{ list-style: none; } li{ width: 100px; height: 35px; position: relative; transform-style: preserve-3d; perspective: 10000px; float: left; margin-left:10px; } li:hover{ transition: all 0.2s; transform: rotateX(90deg); } li >div{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } li >div:first-child{ background: red; transform: translateZ(17.5px); } li >div:last-child{ background: blue; transform: translateY(17.5px) rotateX(-90deg); } </style> </head> <body> <ul> <li class="box"> <div>nihao1</div> <div>123</div> </li> <li class="box"> <div>234</div> <div>123</div> </li> <li class="box"> <div>234</div> <div>345</div> </li> </ul> </body> </html> |
9.旋转木马小案例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <style> body { perspective: 50000px; } .box { margin: 200px auto; height: 300px; width: 1200px; position: relative; transform-style: preserve-3d; transform: rotateX(-10deg); /*将zf-rotate动画添加,时长3s,匀速运动,无限循环 */ animation: zf-rotate 3s linear infinite; } /** * 定义一个旋转动画 */ @keyframes zf-rotate { 0%{ transform: rotateY(0) rotateX(-10deg); } 100%{ transform: rotateY(360deg) rotateX(-10deg); } } .box:hover{ /*停止动画*/ animation-play-state: paused; } .box div { width: 350px; height: 300px; position: absolute; top: 0; left: 425px; } .box div:nth-child(1) { background: red; } .box div:nth-child(2) { background: blue; transform: translateZ(350px); } .box div:nth-child(3) { background: black; transform: translateX(-350px) translateZ(350px) rotateY(-45deg); } .box div:nth-child(4) { background: yellow; transform: translateX(-350px) rotateY(-90deg); } .box div:nth-child(5) { background: green; transform: translateX(-350px) translateZ(-350px) rotateY(-135deg); } .box div:nth-child(6) { background: aqua; transform: translateZ(-350px) rotateY(-180deg); } .box div:nth-child(7) { background: blueviolet; transform: translateX(350px) translateZ(-350px) rotateY(-225deg); } .box div:nth-child(8) { background: lightcoral; transform: translateX(350px) rotateY(-270deg); } .box div:nth-child(9) { background: peachpuff; transform: translateX(350px) translateZ(350px) rotateY(-315deg); } </style> <div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html> |
10.浏览器素有前缀
- -moz- :代表firefox浏览器素有属性
- -ms- :代表ie浏览器私有属性
- -webkit- :代表safari ,chrome浏览器素有属性
- -o- :代表opera浏览器素有属性
提倡写法
1 2 3 4 5 |
-moz-border-radius: 10px; /*兼容firefox*/ -ms-border-radius: 10px; /*兼容ie*/ -webkit-border-radius: 10px; /*兼容safari chrome*/ -o-border-radius: 10px; /*兼容opera*/ border-radius: 10px; |