Jak zrobić obraz 3D za pomocą CSS

Rysuję szachownicę za pomocą tabeli html teraz chcę, aby 3D to moje css i html.Jak zrobić obraz 3D za pomocą CSS

table { 
 
    margin: 0 auto; 
 
    border-collapse: collapse; 
 
    background: black; 
 
} 
 
td { 
 
    width: 60px; height: 60px; 
 
} 
 
tr:nth-child(odd) td:nth-child(even), 
 
tr:nth-child(even) td:nth-child(odd) { 
 
    background: white; 
 
    width: 59px; 
 
    height: 50px; 
 
}

<table height="488" width="460" style="display:inline-block;border-style:double"> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
</table>

Aktualny Wynik:

Chcesz zrobić to lubią:

Źródło

2016-11-29 DumpsterDiver

próbowałeś perspektywy i przekształcić Obrót -> https://css-tricks.com/almanac/properties/p/perspective/ – theoretisch

tak, ale nie jestem zrozumienia, jak zrób to tak, jak to jest – DumpsterDiver

A jeśli chcesz, że wygląda trochę więcej niż 3D można wziąć kod z @haxxxton i dodać div na dole jak poniżej.

table { 
 
\t margin: 0 auto; 
 
\t border-collapse: collapse; 
 
\t background: black; 
 
\t border:2px double black; 
 
} 
 
td { 
 
\t width: 60px; height: 60px; 
 
} 
 
tr:nth-child(odd) td:nth-child(even), 
 
tr:nth-child(even) td:nth-child(odd) { 
 
\t background: white; 
 
\t width: 59px; 
 
\t height: 59px; 
 
} 
 
.parent { 
 
\t margin:0 auto; 
 
\t height:488px; 
 
\t width:460px; 
 
\t perspective-origin: 50% 50%; 
 
\t perspective: 1000px; 
 
} 
 
.child { 
 
\t transform: rotateX(60deg); 
 
} 
 
#div3 { 
 
    position: relative; 
 
    height: 10px; 
 
    width: 616px; 
 
    margin-left:-61px; 
 
    margin-top:-90px; 
 
    background-color: brown; 
 
    border: 1px solid black; 
 
    }

<div class="parent"> 
 
\t <table class="child" height="488" width="488"> 
 
\t \t <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
\t \t <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
\t \t <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
\t \t <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
\t \t <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
\t \t <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
\t \t <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
\t \t <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
\t </table> 
 
    <div id="div3"></div> 
 
</div>

Źródło

2016-11-29 07:47:38 theoretisch

Korzystanie perspective i rotateX można osiągnąć to, co jesteś po. Przeniesiono także styl tabeli do arkusza stylów i poprawiono obramowanie.

PS. zaktualizowane, zmieniając kwadrat kwadratów szachownica

JSFIDDLE

CSS

table { 
    margin: 0 auto; 
    border-collapse: collapse; 
    background: black; 
    border:2px double black; 
} 
td { 
    width: 60px; height: 60px; 
} 
tr:nth-child(odd) td:nth-child(even), 
tr:nth-child(even) td:nth-child(odd) { 
    background: white; 
    width: 59px; 
    height: 59px; 
} 
.parent { 
    margin:0 auto; 
    height:488px; 
    width:460px; 
    perspective-origin: 50% 50%; 
    perspective: 1000px; 
} 
.child { 
    transform: rotateX(60deg); 
}

HTML

<div class="parent"> 
    <table class="child" height="488" width="488"> 
     <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
     <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
     <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
     <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
     <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
     <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
     <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
     <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
    </table> 
</div>

Źródło

2016-11-29 07:21:24 haxxxton

.parent { 
 
    margin: -100px auto; 
 
    width: 460px; 
 
    height: 488px; 
 
    perspective: 1000px; 
 
    perspective-origin: 50% 50%; 
 
} 
 
table { 
 
    margin: 0 auto; 
 
    border-collapse: collapse; 
 
    background: #533E29; 
 
} 
 
td { 
 
    width: 60px; 
 
    height: 60px; 
 
} 
 
tr:nth-child(odd) td:nth-child(even), 
 
tr:nth-child(even) td:nth-child(odd) { 
 
    background: #BC8D5E; 
 
    width: 59px; 
 
    height: 50px; 
 
} 
 
.board-border { 
 
    transform: rotateX(60deg); 
 
    background: #96715F; 
 
    box-shadow: 0px 10px 3px 2px #333; 
 
    width: 470px; 
 
    height: 498px; 
 
} 
 
.board-border:after { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: 5; 
 
    width: 460px; 
 
    height: 488px; 
 
    bottom: 5px; 
 
    left: 5px; 
 
    /* overlay styles */ 
 
    background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.33) 0%, rgba(255, 255, 255, 0.33) 40%, rgba(255, 255, 255, 0) 61%, rgba(255, 255, 255, 0) 100%); 
 
    background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.33) 0%, rgba(255, 255, 255, 0.33) 40%, rgba(255, 255, 255, 0) 61%, rgba(255, 255, 255, 0) 100%); 
 
    background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.33) 0%, rgba(255, 255, 255, 0.33) 40%, rgba(255, 255, 255, 0) 61%, rgba(255, 255, 255, 0) 100%); 
 
    background: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.33) 0%, rgba(255, 255, 255, 0.33) 40%, rgba(255, 255, 255, 0) 61%, rgba(255, 255, 255, 0) 100%); 
 
    background: linear-gradient(-45deg, rgba(255, 195, 130, 0.33) 0%, rgba(255, 195, 130, 0.33) 40%, rgba(255, 195, 130, 0) 70%, rgba(255, 195, 130, 0) 100%); 
 
}

<div class="parent"> 
 
    <div class="board-border"> 
 
    <table height="488" width="460"> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

Źródło

2016-11-29 07:44:35

Doskonały Panie, to jest dokładnie to, o czym wspomniałem. – DumpsterDiver

Naturalnie, jest to trudne do osiągnięcia pełnego efektu 3D. Mogłem osiągnąć efekt podobny używając:

transform: perspective(600px) rotateX(45deg); - efekt perspektywy.
background: radial-gradient - dla efektu delikatnego oświetlenia.
Przezroczyste światło kwadratowe, więc efekt tła jest widoczny.
Animacja po najechaniu, aby pokazać, jak się zachowuje.

table { 
 
    margin: 0 120px; 
 
    border-collapse: collapse; 
 
    background: radial-gradient(circle at 70% 90%,#8A6A4A,#4E3A27); 
 
    transform: perspective(600px) rotateX(45deg); 
 
    transition: 0.8s; 
 
} 
 
table:hover { 
 
    transform: perspective(500px) rotateX(60deg) rotateY(-5deg); 
 
} 
 

 
td { 
 
    width: 28px; height: 28px; border:none; 
 
} 
 
tr:nth-child(odd) td:nth-child(even), 
 
tr:nth-child(even) td:nth-child(odd) { 
 
    background: rgba(255,195,130,0.3); 
 
}

<table style="display:inline-block;border-style:double"> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
</table>

Źródło

2016-11-29 07:48:27 Kobi

Jak zrobić obraz 3D za pomocą CSS

Odpowiedz

Powiązane problemy