如何獲得我的分區的3d立方體樣式

Question

我希望這個分區的3D樣式。我不知道該怎麼做。

.cube{ 
 
    width:100px; 
 
    height:100px; 
 
    background:#ff7700; 
 
    color:#fff; 
 
    text-align:center; 
 
    line-height:95px; 
 
}

<div class="cube">3D Cube</div>

Answer 1

https://davidwalsh.name/css-cube退房，這可能是這將幫助你

body { 
 
    margin-top: 125px; 
 
} 
 

 
@-moz-keyframes spinningH { 
 
    from { 
 
    -moz-transform: rotateX(0deg) rotateY(0deg); 
 
    } 
 
    to{ 
 
    -moz-transform: rotateX(360deg) rotateY(360deg); 
 
    } 
 
} 
 

 
@-webkit-keyframes spinningH { 
 
    from { 
 
    -webkit-transform: rotateX(0deg) rotateY(0deg); 
 
    } 
 
    to{ 
 
    -webkit-transform: rotateX(360deg) rotateY(360deg); 
 
    } 
 
} 
 

 
@-o-keyframes spinningH { 
 
    from { 
 
    -o-transform: rotateX(0deg) rotateY(0deg); 
 
    } 
 
    to{ 
 
    -o-transform: rotateX(360deg) rotateY(360deg); 
 
    } 
 
} 
 

 
@-ms-keyframes spinningH { 
 
    from { 
 
    -ms-transform: rotateX(0deg) rotateY(0deg); 
 
    } 
 
    to{ 
 
    -ms-transform: rotateX(360deg) rotateY(360deg); 
 
    } 
 
} 
 

 
@keyframes spinningH { 
 
    from { 
 
    transform: rotateX(0deg) rotateY(0deg); 
 
    } 
 
    to{ 
 
    transform: rotateX(360deg) rotateY(360deg); 
 
    } 
 
} 
 

 
#container { 
 
    -webkit-perspective : 1000px; 
 
    -moz-perspective : 1000px; 
 
    -o-perspective  : 1000px; 
 
    -ms-perspective  : 1000px; 
 
    perspective   : 1000px; 
 

 
    -webkit-perspective-origin : 50% 50%; 
 
    -moz-perspective-origin  : 50% 50%; 
 
    -moz-transform-origin  : 50% 50%; 
 
    -o-perspective-origin  : 50% 50%; 
 
    -ms-perspective-origin  : 50% 50%; 
 
    perspective-origin   : 50% 50%; 
 
} 
 

 
.animate { 
 
    -webkit-animation : spinningH 6s infinite linear; 
 
    -moz-animation : spinningH 6s infinite linear; 
 
    -o-animation  : spinningH 6s infinite linear; 
 
    -ms-animation  : spinningH 6s infinite linear; 
 
    animation   : spinningH 6s infinite linear; 
 
} 
 

 
#cube { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    height: 400px; 
 
    width: 400px; 
 

 
    -webkit-transition : -webkit-transform 2s linear; 
 
    -moz-transition  : -moz-transform 2s linear; 
 
    -o-transition  : -o-transform 2s linear; 
 
    -ms-transition  : -ms-transform 2s linear; 
 
    transition   : transform 2s linear; 
 

 
    -webkit-transform-style : preserve-3d; 
 
    -moz-transform-style : preserve-3d; 
 
    -o-transform-style  : preserve-3d; 
 
    -ms-transform-style  : preserve-3d; 
 
    transform-style   : preserve-3d; 
 
} 
 

 
#cube>div { 
 
    position: absolute; 
 
    height: 360px; 
 
    width: 360px; 
 
    padding: 20px; 
 
    opacity: 0.9; 
 
    background-position:center center; 
 
} 
 

 
#cube div:nth-child(1) { 
 
    -webkit-transform : translateZ(200px); 
 
    -moz-transform : translateZ(200px); 
 
    -o-transform  : translateZ(200px); 
 
    -ms-transform  : translateZ(200px); 
 
    transform   : translateZ(200px); 
 
    background-color : #2E272F; 
 
    
 
    background-repeat : no-repeat; 
 
} 
 

 
#cube div:nth-child(2) { 
 
    -webkit-transform : rotateY(90deg) translateZ(200px); 
 
    -moz-transform : rotateY(90deg) translateZ(200px); 
 
    -o-transform  : rotateY(90deg) translateZ(200px); 
 
    -ms-transform  : rotateY(90deg) translateZ(200px); 
 
    transform   : rotateY(90deg) translateZ(200px); 
 
    background-color : #2D3A4D; 
 
    
 
    background-repeat : no-repeat; 
 
} 
 

 
#cube div:nth-child(3) { 
 
    -webkit-transform : rotateY(180deg) translateZ(200px); 
 
    -moz-transform : rotateY(180deg) translateZ(200px); 
 
    -o-transform  : rotateY(180deg) translateZ(200px); 
 
    -ms-transform  : rotateY(180deg) translateZ(200px); 
 
    transform   : rotateY(180deg) translateZ(200px); 
 
    background-color : #2D1C12; 
 
    
 
    background-repeat : no-repeat; 
 
} 
 

 
#cube div:nth-child(4) { 
 
    -webkit-transform : rotateY(-90deg) translateZ(200px); 
 
    -moz-transform : rotateY(-90deg) translateZ(200px); 
 
    -o-transform  : rotateY(-90deg) translateZ(200px); 
 
    -ms-transform  : rotateY(-90deg) translateZ(200px); 
 
    transform   : rotateY(-90deg) translateZ(200px); 
 
    background-color : #693C1F; 
 
    
 
    background-repeat : no-repeat; 
 
} 
 

 
#cube div:nth-child(5) { 
 
    -webkit-transform : rotateX(-90deg) translateZ(200px) rotate(180deg); 
 
    -moz-transform : rotateX(-90deg) translateZ(200px) rotate(180deg); 
 
    -o-transform  : rotateX(-90deg) translateZ(200px) rotate(180deg); 
 
    -ms-transform  : rotateX(-90deg) translateZ(200px) rotate(180deg); 
 
    transform   : rotateX(-90deg) translateZ(200px) rotate(180deg); 
 
    background-color : #955122; 
 
    
 
    background-repeat :no-repeat; 
 
} 
 

 
#cube div:nth-child(6) { 
 
    -webkit-transform : rotateX(90deg) translateZ(200px); 
 
    -moz-transform : rotateX(90deg) translateZ(200px); 
 
    -o-transform  : rotateX(90deg) translateZ(200px); 
 
    -ms-transform  : rotateX(90deg) translateZ(200px); 
 
    transform   : rotateX(90deg) translateZ(200px); 
 
    background-color : #E34C26; 
 
    
 
    background-repeat :no-repeat; 
 
    text-align:center; 
 
}

<div id="container"> 
 
    <div id="cube" class="animate"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 
</div>

Answer 2

div{ 
 
line-height:100px; 
 
color:#600; 
 
} 
 
.e1{ 
 
\t position:absolute; 
 
\t left:450px; 
 
\t top:250px; 
 
\t width:100px; 
 
\t height:100px; 
 
\t background:#00ffff; 
 
\t opacity:0.5; 
 
\t text-align:center; 
 
} 
 
.e2{ 
 
\t position:absolute; 
 
\t left:450px; 
 
\t top:190px; 
 
\t width:100px; 
 
\t height:100px; 
 
\t background:red; 
 
\t -ms-transform: skewY(50deg); 
 
\t -webkit-transform: skewY(50deg); 
 
\t -moz-transform: skewY(50deg); 
 
\t z-index:-1; 
 
\t text-align:center; 
 
\t 
 
} 
 
.e3{ 
 
\t position:absolute; 
 
\t left:350px; 
 
\t top:191px; 
 
\t width:100px; 
 
\t height:100px; 
 
\t background:yellow; 
 
\t -ms-transform: skewY(50deg); 
 
\t -webkit-transform: skewY(50deg); 
 
\t -moz-transform: skewY(50deg); 
 
\t opacity:0.9; 
 
\t z-index:-1; 
 
\t text-align:center; 
 
\t 
 
} 
 
.e4{ 
 
\t position:absolute; 
 
\t left:408px; 
 
\t top:250px; 
 
\t width:100px; 
 
\t height:100px; 
 
\t background:green; 
 
\t -ms-transform: skewX(40deg); 
 
\t -webkit-transform: skewX(40deg); 
 
\t -moz-transform: skewX(40deg); 
 
\t z-index:-4; 
 
\t text-align:center; 
 
\t 
 
} 
 
.e5{ 
 
\t position: absolute; 
 
    left: 351px; 
 
    top: 131px; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: lightblue; 
 
    -ms-transform: skewX(1deg); 
 
    -webkit-transform: skewX(1deg); 
 
    -moz-transform: skewX(1deg); 
 
    z-index: -5; 
 
    text-align: center; 
 
\t 
 
} 
 
.e6{ 
 
\t position: absolute; 
 
    left: 399px; 
 
    top: 131px; 
 
    width: 102px; 
 
    height: 119px; 
 
    background: #75d55f; 
 
    -ms-transform: skewX(40deg); 
 
    -webkit-transform: skewX(40deg); 
 
    -moz-transform: skewX(40deg); 
 
    z-index: 0; 
 
    text-align: center; 
 
\t opacity:0.5; 
 
\t 
 
\t 
 
}

<div class="e1">1</div> 
 
    <div class="e2">2</div> 
 
    <div class="e3">3</div> 
 
    <div class="e4">4</div> 
 
    <div class="e5">5</div> 
 
    <div class="e6">6</div>

Answer 3

.scene { 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: 75px auto 0; 
 
    perspective: 1200px; 
 
} 
 

 
.cube { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 300px; 
 
    transform-style: preserve-3d; 
 
    animation: example 10s linear infinite; 
 
} 
 

 
.side { 
 
    position: absolute; 
 
    width: 300px; 
 
    height: 300px; 
 
    box-sizing: border-box; 
 
    border: 5px solid #9aa; 
 
    background-color: rgba(32, 170, 151, 0.5); 
 
    padding: 120px 0; 
 
    font: 50px/1 'Trebuchet MS', sans-serif; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
} 
 

 
.back { 
 
    transform: translateZ(-150px); 
 
} 
 
.top { 
 
    transform: translateY(-150px) rotateX(90deg); 
 
} 
 
.bottom { 
 
    transform: translateY(150px) rotateX(90deg); 
 
} 
 
.front { 
 
    transform: translateZ(150px); 
 
} 
 
.top, .bottom { 
 
    background-color: rgba(105, 136, 190, 0.5) 
 
} 
 

 
@keyframes example { 
 
    100% { transform: rotateX(360deg); } 
 
}

<div class="scene"> 
 
    <div class="cube"> 
 
    <div class="side back">BACK</div> 
 
    <div class="side top">TOP</div> 
 
    <div class="side bottom">BOTTOM</div> 
 
    <div class="side front">FRONT</div> 
 
    </div> 
 
</div>