CSS3 制作正方体
0
悬赏园豆：5
[已解决问题]
解决于 2016-08-11 08:50
<style> .wrap {width:200px; height:200px; padding:200px; border:1px solid #000; margin:250px auto; perspective:800px; } .box {width:200px; height:200px; position:relative; transition:3s all; transform-style:preserve-3d; } .wrap:hover .box {transform:rotateX(180deg); } .box div {width:200px; height:200px; position:absolute; text-align:center; line-height:200px; font-size:100px; font-weight:bold; } .box div:nth-of-type(1){background-color:red; top:-200px; left:0; transform-origin:bottom; transform:rotateX(90deg); } .box div:nth-of-type(2){background-color:blue; top:0; left:-200px; transform-origin:right; transform:rotateY(-90deg); } .box div:nth-of-type(4){background-color:green; top:0; left:200px; transform-origin:left; transform:rotateY(90deg); } .box div:nth-of-type(5){background-color:pink; top:200px; left:0; transform-origin:top; transform:rotateX(-90deg); } .box div:nth-of-type(6){background-color:#f60; top:0; left:0; transform:translateZ(-200px); } .box div:nth-of-type(3){background-color:yellow; top:0; left:0; } </style> <div class="wrap"> <div class="box"> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> <div> 5 </div> <div> 6 </div> </div> </div>
6个div是六个面形成一个正方体
div1为上面，2为左面，3为前面，4为右面，5为下面，6为后面
请问哪里出了错，导致div4、5、6（颜色）遮住了最前面的div3 ？？？
最佳答案
0
1 1 <!DOCTYPE html> 2 2 <html lang="en"> 3 3 <head> 4 4 <meta charset="UTF-8"> 5 5 <title>cube_3D</title> 6 6 </head> 7 7 <style type="text/css"> 8 8 *{ 9 9 margin: 0; 10 10 padding: 0; 11 11 } 12 12 .container{ 13 13 width: 800px; 14 14 height: 500px; 15 15 background-color: #ccc; 16 16 margin: 50px auto; 17 17 position: relative; 18 18 } 19 19 .container .box{ 20 20 margin: auto; 21 21 position: absolute; 22 22 width: 1px; 23 23 height: 1px; 24 24 top: 0; 25 25 left: 0; 26 26 bottom: 0; 27 27 right: 0; 28 28 background-color: red; 29 29 transform-style: preserve-3d; 30 30 } 31 31 @keyframes an1{ 32 32 0%{ 33 33 transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); 34 34 } 35 35 25%{ 36 36 transform: rotateY(180deg) rotateX(45deg) rotateZ(0deg); 37 37 } 38 38 50%{ 39 39 transform: rotateY(360deg) rotateX(45deg) rotateZ(0deg); 40 40 } 41 41 75%{ 42 42 transform: rotateY(270deg) rotateX(270deg) rotateZ(270deg); 43 43 } 44 44 100%{ 45 45 transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg); 46 46 } 47 47 } 48 48 .container .box .cube_1{ 49 49 list-style: none; 50 50 width: 200px; 51 51 height: 200px; 52 52 margin: -100px -100px; 53 53 position: absolute; 54 54 perspective: 4000px; 55 55 transform-style: preserve-3d; 56 56 animation: an1 10s linear 0s infinite; 57 57 } 58 58 .container .box .cube_1 li{ 59 59 position: absolute; 60 60 width: 200px; 61 61 height: 200px; 62 62 opacity: 0.5; 63 63 transition: transform .2s ease-in 0s; 64 64 } 65 65 .container .box .cube_1 li img{ 66 66 width: 200px; 67 67 height: 200px; 68 68 } 69 69 .container .box .cube_1 li:nth-child(1){ 70 70 transform: rotateY(0deg) translateZ(100px); 71 71 transition: all 1s ease-in 0; 72 72 } 73 73 .container .box .cube_1 li:nth-child(2){ 74 74 transform: rotateY(90deg) translateZ(100px); 75 75 } 76 76 .container .box .cube_1 li:nth-child(3){ 77 77 transform: rotateY(180deg) translateZ(100px); 78 78 } 79 79 .container .box .cube_1 li:nth-child(4){ 80 80 transform: rotateY(270deg) translateZ(100px); 81 81 } 82 82 .container .box .cube_1 li:nth-child(5){ 83 83 transform: rotateX(90deg) translateZ(100px); 84 84 } 85 85 .container .box .cube_1 li:nth-child(6){ 86 86 transform: rotateX(-90deg) translateZ(100px); 87 87 } 88 88 89 89 .container .box .cube_2{ 90 90 list-style: none; 91 91 width: 100px; 92 92 height: 100px; 93 93 position: absolute; 94 94 margin: -50px -50px; 95 95 perspective: 4000px; 96 96 transform-style: preserve-3d; 97 97 animation: an1 10s linear 0s infinite; 98 98 } 99 99 .container .box .cube_2 li{ 100 100 position: absolute; 101 101 width: 100px; 102 102 height: 100px; 103 103 } 104 104 .container .box .cube_2 li img{ 105 105 width: 100px; 106 106 height: 100px; 107 107 } 108 108 .container .box .cube_2 li:nth-child(1){ 109 109 transform: rotateY(0deg) translateZ(50px); 110 110 } 111 111 .container .box .cube_2 li:nth-child(2){ 112 112 transform: rotateY(90deg) translateZ(50px); 113 113 } 114 114 .container .box .cube_2 li:nth-child(3){ 115 115 transform: rotateY(180deg) translateZ(50px); 116 116 } 117 117 .container .box .cube_2 li:nth-child(4){ 118 118 transform: rotateY(270deg) translateZ(50px); 119 119 } 120 120 .container .box .cube_2 li:nth-child(5){ 121 121 transform: rotateX(90deg) translateZ(50px); 122 122 } 123 123 .container .box .cube_2 li:nth-child(6){ 124 124 transform: rotateX(-90deg) translateZ(50px); 125 125 } 126 126 127 127 .container .box:hover .cube_1 li:nth-child(1){ 128 128 transform: rotateY(0deg) translateZ(200px); 129 129 } 130 130 .container .box:hover .cube_1 li:nth-child(2){ 131 131 transform: rotateY(90deg) translateZ(200px); 132 132 } 133 133 .container .box:hover .cube_1 li:nth-child(3){ 134 134 transform: rotateY(180deg) translateZ(200px); 135 135 } 136 136 .container .box:hover .cube_1 li:nth-child(4){ 137 137 transform: rotateY(270deg) translateZ(200px); 138 138 } 139 139 .container .box:hover .cube_1 li:nth-child(5){ 140 140 transform: rotateX(90deg) translateZ(200px); 141 141 } 142 142 .container .box:hover .cube_1 li:nth-child(6){ 143 143 transform: rotateX(-90deg) translateZ(200px); 144 144 } 145 145 </style> 146 146 <body> 147 147 <div class="container"> 148 148 <div class="box"> 149 149 <ul class="cube_1"> 150 150 <li><img src="../Img/1.jpg"></li> 151 151 <li><img src="../Img/2.jpg"></li> 152 152 <li><img src="../Img/3.jpg"></li> 153 153 <li><img src="../Img/4.jpg"></li> 154 154 <li><img src="../Img/5.jpg"></li> 155 155 <li><img src="../Img/6.jpg"></li> 156 156 </ul> 157 157 <ul class="cube_2"> 158 158 <li><img src="../Img/7.jpg"></li> 159 159 <li><img src="../Img/8.jpg"></li> 160 160 <li><img src="../Img/9.jpg"></li> 161 161 <li><img src="../Img/1.jpg"></li> 162 162 <li><img src="../Img/2.jpg"></li> 163 163 <li><img src="../Img/3.jpg"></li> 164 164 </ul> 165 165 </div> 166 166 </div> 167 167 </body> 168 168 </html>
收获园豆：5
其他回答(2)
0
<style> .wrap { width: 200px; height: 200px; padding: 200px; border: 1px solid #000; margin: 250px auto; perspective: 800px; } .box { width: 200px; height: 200px; position: relative; transition: 3s all; transform-style: preserve-3d; transform: rotateX(30deg) rotateY(30deg); } .wrap:hover .box { transform: rotateX(180deg); } .box div { width: 200px; height: 200px; position: absolute; text-align: center; line-height: 200px; font-size: 100px; font-weight: bold; } .box div:nth-of-type(1) { background: hsla(0, 100%, 50%, 0.7); transform: translateZ(100px); } .box div:nth-of-type(2) { background: hsla(60, 100%, 50%, 0.7); transform: rotateX(180deg) translateZ(100px); } .box div:nth-of-type(3) { background: hsla(120, 100%, 50%, 0.7); transform: rotateY(-90deg) translateZ(100px); } .box div:nth-of-type(4) { background: hsla(180, 100%, 50%, 0.7); transform: rotateY(90deg) translateZ(100px); } .box div:nth-of-type(5) { background: hsla(240, 100%, 50%, 0.7); transform: rotateX(90deg) translateZ(100px); } .box div:nth-of-type(6) { background: hsla(300, 100%, 50%, 0.7); transform: rotateX(-90deg) translateZ(100px); } </style> <div class="wrap"> <div class="box"> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> <div> 5 </div> <div> 6 </div> </div> </div>
你的意思是加个apha？
0
你可以使用这个属性z-index 默认值为0
值越小 标签显示就越靠前
