首页新闻找找看学习计划

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 ???

前端爱好者的主页 前端爱好者 | 初学一级 | 园豆:78
提问于:2016-07-24 20:24
< >
分享
最佳答案
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
wa-kaka | 菜鸟二级 |园豆:272 | 2016-07-28 16:34
其他回答(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?

Uteki | 园豆:573 (小虾三级) | 2016-07-25 16:18
0

你可以使用这个属性z-index 默认值为0 

值越小  标签显示就越靠前

 

 

没有关系 | 园豆:206 (菜鸟二级) | 2016-08-03 11:07
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册