首页 > 代码库 > css 3d box 实现的一些注意事项
css 3d box 实现的一些注意事项
Test1.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0;10 }11 .wrap{12 margin: 50px auto;13 width: 200px;14 padding: 200px;15 perspective: 800px;16 border: 1px dashed #333;17 }18 .box{19 position: relative;20 width: 200px;21 height: 200px;22 line-height: 200px;23 font-size: 100px;24 text-align: center;25 color: #fff;26 font-weight: bold;27 border: 1px dashed #ccc;28 transform-style: preserve-3d;29 transform-origin: center center -100px;/*定位的方式，旋转中心点这样设置，但存在兼容性问题*/30 transition: 1s;31 }32 .box div{33 position: absolute;34 width: 200px;35 height: 200px;36 }37 .box div:nth-of-type(1){38 top: -200px;39 background-color: red;40 transform-origin: bottom;41 transform: rotateX(90deg);42 }43 .box div:nth-of-type(2){44 left: -200px;45 background-color: green;46 transform-origin: right;47 transform: rotateY(-90deg);48 }49 .box div:nth-of-type(3){50 background-color: blue;51 }52 .box div:nth-of-type(4){53 right: -200px;54 background-color: #333;55 transform-origin: left;56 transform: rotateY(90deg);57 }58 .box div:nth-of-type(5){59 bottom: -200px;60 background-color: yellow;61 transform-origin: top;62 transform: rotateX(-90deg);63 }64 .box div:nth-of-type(6){65 background-color: tan;66 transform: translateZ(-200px) rotateX(180deg);67 }68 .wrap:hover .box{69 transform: rotateX(360deg);70 }71 </style>72 </head>73 <body>74 <div class="wrap">75 <div class="box">76 <div>1</div>77 <div>2</div>78 <div>3</div>79 <div>4</div>80 <div>5</div>81 <div>6</div>82 </div>83 </div>84 </body>85 </html>
Test2.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0;10 }11 .wrap{12 margin: 50px auto;13 width: 200px;14 padding: 200px;15 perspective: 800px;16 border: 1px dashed #333;17 }18 .box{19 position: relative;20 width: 200px;21 height: 200px;22 line-height: 200px;23 font-size: 100px;24 text-align: center;25 color: #fff;26 font-weight: bold;27 border: 1px dashed #ccc;28 transform-style: preserve-3d;29 transform-origin: center center -100px;/*定位的方式，旋转中心点这样设置，但存在兼容性问题*/30 transition: 1s;31 }32 .box div{33 position: absolute;34 width: 200px;35 height: 200px;36 }37 .box div:nth-of-type(1){38 top: -200px;39 background-color: red;40 transform-origin: bottom;41 transform: rotateX(90deg);42 }43 .box div:nth-of-type(2){44 left: -200px;45 background-color: green;46 transform-origin: right;47 transform: rotateY(-90deg);48 }49 .box div:nth-of-type(3){50 background-color: blue;51 }52 .box div:nth-of-type(4){53 right: -200px;54 background-color: #333;55 transform-origin: left;56 transform: rotateY(90deg);57 }58 .box div:nth-of-type(5){59 bottom: -200px;60 background-color: yellow;61 transform-origin: top;62 transform: rotateX(-90deg);63 }64 .box div:nth-of-type(6){65 background-color: tan;66 transform: translateZ(-200px) rotateX(180deg);67 }68 .wrap:hover .box{69 transform: rotateX(360deg);70 }71 </style>72 </head>73 <body>74 <div class="wrap">75 <div class="box">76 <div>1</div>77 <div>2</div>78 <div>3</div>79 <div>4</div>80 <div>5</div>81 <div>6</div>82 </div>83 </div>84 </body>85 </html>
Test3.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 /*不用麻烦设置left，top等值*/ 8 .wrap{ 9 margin: 0 auto;10 width: 200px;11 height: 200px;12 padding: 200px;13 border: 1px solid #333;14 perspective: 800px;/*!!!*/15 }16 .box{17 width: 200px;18 height: 200px;19 position: relative;20 transform-style: preserve-3d;/*!!!*/21 transition: 3s all;22 transform: translateZ(-100px) rotateX(0);23 }24 .box div{25 width: 200px;26 height: 200px;27 line-height: 200px;28 color: #fff;29 position: absolute;30 font-size: 100px;31 text-align: center;32 }33 .box div:nth-of-type(1){34 background-color: red;35 transform: translateZ(100px);36 }37 .box div:nth-of-type(2){38 background-color: blue;39 transform-origin: top;40 transform: translateZ(-100px) rotateX(90deg);/*!!!先移到最里面再操作能保证数字是正的，然后再向前移动，然后再控制其父向后移动*/41 }42 .box div:nth-of-type(3){43 background-color: yellow;44 transform: translateZ(-100px) rotateX(180deg);/*!!!*/45 }46 .box div:nth-of-type(4){47 background-color: green;48 transform-origin: bottom;49 transform: translateZ(-100px) rotateX(-90deg);/*!!!*/50 }51 .wrap:hover .box{52 transform: translateZ(-100px) rotateX(270deg);53 }54 </style>55 </head>56 <body>57 <div class="wrap">58 <div class="box">59 <div>1</div>60 <div>2</div>61 <div>3</div>62 <div>4</div>63 </div>64 </div>65 </body>66 </html>
css 3d box 实现的一些注意事项
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。