How to create-cube-nur mit HTML und CSS?
Habe ich dies und das möchte ich , dass ein Würfel mit HTML & CSS nur wie im Bild oben. Meine beste versuchen:
CSS:
.mainDiv{
position: relative;
width: 206px;
height: 190px;
margin: 0px auto;
margin-top:100px;
}
.square{
width:100px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
float:left;
transform: skew(180deg,210deg);
position: absolute;
top: 43px;
}
.square2{
width:100px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
float:left;
transform: skew(180deg,150deg);
position: absolute;
left:102px;
top: 43px;
}
.square3{
width:100px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
float:left;
transform: skew(180deg,180deg);
position: absolute;
left: 51px;
top: -61px;
}
HTML:
<div class="mainDiv">
<div class="square"></div>
<div class="square2"></div>
<div class="square3"></div>
</div>
- css3gen.com/css-3d-transform
- Sind Sie sich bewusst von der Möglichkeit der Verwendung von Stack-Snippets um die demo innerhalb der Frage statt mit einem Drittanbieter-Anwendung? Es ist nur eine Frage, um zwei Kommentare anstelle Ihrer hand gemacht
**HTML**
überschriften und Sie erhalten würde, es hier (und wenn Sie möchten, können Sie noch einen link zu der externen Quelle). - Sie verwenden können, zu transformieren, dies zu erreichen. Siehe tt-cc.cc/web-app/css3-3d-shape-generator
Du musst angemeldet sein, um einen Kommentar abzugeben.
Entsprechend Ihrer HTML, bekomme ich dieses JSFiddle. Ich habe gerade gespielt mit
transform
.CSS:
HTML:
Aktualisierte CSS -
Ich geändert transform CSS mit diesem.
Extra: David Walsh hat einen coolen animierten version auf einem cube. Abgesehen von der Tatsache, dass es sieht irgendwie cool, durch das hantieren mit den Einstellungen können Sie lernen eine ganze Menge über Sie.
(-90;90)
ist der normale Bereich für neigen.left:Xpx
. stackoverflow.com/questions/11333624/...Können Sie auch erreichen einen Würfel mit 3d-Transformationen. Dies wird Ihr Würfel eine realistischere Perspektive. Als ob der cube war eine echte 3d-Form wie diese:
Im folgenden habe ich einen div mit 2 pseudo-Elemente :
CSS:
HTML:
CSS-3d-Würfel mit 6 Flächen:
Diese Technik ermöglicht es Ihnen, eine "echte Würfel" mit 6 Gesichtern:
CSS:
HTML:
Hinweis, dass ich nicht fügen Sie die vendor-Präfixe in den Beispielen. Für weitere Informationen über browser-Unterstützung und was vendor-Präfixe benötigt werden, entsprechend Ihrer Zielgruppe, siehe canIuse für 3d-Transformationen.
Im Grunde wollen Sie tun 2 Transformationen:
also im Grunde, Sie tun müssen, um eine
transform: rotate(x) skew(y, y)
und spielen ein bisschen mit der Größe und der Platzierung.hier eine kleine demo die ich erstellt habe, basiert auf Ihrer eigenen demo:
(Ich habe entfernen Sie die Grenzen, da Sie fühlte, nicht mehr benötigte zu mir)
CSS:
HTML:
Lassen Sie mich zunächst darauf hinweisen, dass eine
skew
Winkel sollte zwischen-90deg
und90deg
, nicht inklusive. Alle von Ihr verzerrt fallen Weg außerhalb dieses Bereichs.Beschränke mich auf eine sinnvolle skew zahlen, es stellte sich heraus, ziemlich einfach zu sein:
CSS:
HTML:
Job zu erledigen. Ich habe auch aufgeräumt, die große Wiederholung von Stilen in eine gemeinsame Klasse für Sie.
Ändern der CSS-Datei für
.square3
sollte es tun:https://jsfiddle.net/8vuj7peb/26/
Verwenden Sie den folgenden css-Code für
.square3
:Einer einzigen box und 2 pseudos kann dies ebenfalls tun.
http://codepen.io/gc-nomade/pen/vGeajp
CSS:
HTML:
Ich gesehen und dachte, ich möchte hinzufügen, etwas, das ich kam mit, während Sie versuchen, machen einige altmodische abc-Blöcke. Machen Sie in 3d-ich hatte nur die Beschriftung der Haupt-container mit einer anderen Klasse um Positionen zu ändern und auf den gespeicherten code. Ich kommentierte das tutorial im code. Hoffe, das jemand hilft. 🙂
CSS:
HTML: