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>