CSSを使用して3Dイメージを作成するには

私はcssとhtmlです。CSSを使用して3Dイメージを作成するには

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>

現在の結果：

それを好きにしたい：

perspectiveを使用して

出典

2016-11-29 DumpsterDiver

あなたは視点をしようとした回転を変換している - > https://css-tricks.com/almanac/properties/p/perspective/ – theoretisch

はいしかし、私はどのように理解していないのですこのようにしてください – DumpsterDiver

そして、あなたはそれはあなたが@haxxxtonからコードを取ると、以下のように下にあるdiv要素を追加することができますよりも、もう少し3Dに見えることをしたい場合。

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>

出典

2016-11-29 07:47:38 theoretisch

とrotateXあなたが後にしているものを達成することができます。また、テーブルスタイリングをスタイルシートに移動して境界線を固定しました。

PS。チェス盤の正方形の広場に

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>

出典

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>

出典

2016-11-29 07:44:35

優秀な先生、これは私が言いましたexcatlyです。 – DumpsterDiver

当然、完全な3D効果を達成することは困難です。 - 遠近効果

transform: perspective(600px) rotateX(45deg);：私が使用して同様の効果を達成することができました。
background: radial-gradient - ソフトライティング効果のため。
透明な光の正方形なので、背景効果が見えます。
オンホバー・アニメーション・エフェクトで、どのように動作するかを実演します。

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>

出典

2016-11-29 07:48:27 Kobi

CSSを使用して3Dイメージを作成するには

答えて

関連する問題