web-dev-qa-db-fra.com

Comment créer un cube avec seulement HTML et CSS?

CSS cube

J'ai ceci et je veux faire un cube avec HTML et CSS uniquement comme dans l'image ci-dessus. Mon meilleur essayez :

.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;
}
<div class="mainDiv">
  <div class="square"></div>
  <div class="square2"></div>
  <div class="square3"></div>
</div>
htmlcsscss3css-shapes
30
Sunil Gehlot

Selon votre code HTML, j'obtiens ce JSFiddle . Je viens de jouer avec transform.

.mainDiv{
  position: relative;
  width: 206px;
  height: 190px;
  margin: 0px auto;
  margin-top:100px;
}
.square{
  width:100px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  transform: skew(180deg,210deg);
  position: absolute;
  top: 43px;
}
.square2{
  width:100px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  transform: skew(180deg,150deg);
  position: absolute;
  left:102px;
  top: 43px;
}
.square3{
  width:114px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
 

transform: rotate(150deg) translate(-40px, -16px) skew(30deg, 0deg);
  position: absolute;
  left: 0px;
  top: -32px;
}
<div class="mainDiv">
  <div class="square"></div>
  <div class="square2"></div>
  <div class="square3"></div>
</div>

CSS mis à jour 

.square3{
  width:114px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  transform: rotate(150deg) translate(-40px, -16px) skew(30deg, 0deg);
  position: absolute;
  left: 0px;
  top: -32px;
}

J'ai changé le CSS de transformation avec ça.

Extra: David Walsh a une version animée cool sur un cube . Mis à part le fait que ça a l'air plutôt cool, en jouant avec les paramètres, vous pouvez en apprendre beaucoup à ce sujet.

23
Leo the lion

Vous pouvez également réaliser un cube avec transformations 3D . Cela donnera à votre cube une perspective plus réaliste. Comme si le cube était une vraie forme 3D comme celle-ci:

3d cube with 3d transforms

Dans ce qui suit, j'ai utilisé un div avec 2 pseudo-éléments:

body {
  perspective: 900px;
  padding-bottom:50%;
}
div {
  position: relative;
  width: 20%;
  padding-bottom: 20%;
  margin: 0 auto;
  transform-style: preserve-3d;
  background: #C52329;
  transform: rotateX(60deg) rotatez(45deg);
}
div:before, div:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform-Origin: -2% -2%;
  background: inherit;
}
div:before {
  top: 104%; left: 0;
  transform: rotateX(-90deg);
}
div:after {
  top: 0; left: 104%;
  transform: rotateY(90deg);
}
<div></div>

cube 3D CSS à 6 faces :

Cette technique vous permet de réaliser un "vrai cube" à 6 faces:

rotating 3d cube with 6 faces

body{
  perspective-Origin:50% -100%;
  perspective: 900px;
  overflow:hidden;
}
h1{position:absolute;font-family:sans-serif;}
.cube {
  position:relative;
  padding-bottom:20%;
  transform-style: preserve-3d;
  transform-Origin: 50% 100%;
  transform:rotateY(45deg) rotateX(0);
  transition:transform 3s;
}
.cubeFace {
  position: absolute;
  left:40%;top:0;
  width: 20%;height:100%;
  margin: 0 auto;
  transform-style: inherit;
  background: #C52329;
  box-shadow:inset 0 0 0 5px #fff; 
  transform-Origin:50% 50%;
  transform: rotateX(90deg);
  backface-visibility:hidden;
}
.face2{
  transform-Origin:50% 50%;
  transform: rotatez(90deg) translateX(100%) rotateY(90deg);
}
.cubeFace:before, .cubeFace:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform-Origin:0 0;
  background: inherit;
  box-shadow:inherit;
  backface-visibility:inherit;
}
.cubeFace:before {
  top: 100%; left: 0;
  transform: rotateX(-90deg);
}
.cubeFace:after {
  top: 0; left: 100%;
  transform: rotateY(90deg);
}

body:hover .cube{
  transform:rotateY(405deg) rotateX(360deg);
}
<h1>Hover me:</h1>
<div class="cube">
  <div class="cubeFace"></div>
  <div class="cubeFace face2"></div>
</div>

Notez que je n'ai pas ajouté les préfixes des fournisseurs dans les exemples. Pour plus d'informations sur la prise en charge du navigateur et les préfixes de fournisseurs nécessaires en fonction de votre public cible, consultez canIuse pour les transformations 3D .

18
web-tiki

Fondamentalement, vous voulez faire 2 transformations:

  1. faire pivoter le rectangle
  2. le presser (l'incliner)

donc, fondamentalement, vous devez faire une transform: rotate(x) skew(y, y) et jouer un peu avec la taille et le placement.

voici une petite démo que j'ai créée, basée sur votre propre démo:

(J'ai supprimé les bordures car elles me semblaient inutiles)

.mainDiv{
  position: relative;
  width: 206px;
  height: 190px;
  margin: 0px auto;
  margin-top:100px;
}
.square{
  width:100px;
  height:100px;
  background:#c52329;
  float:left;
  transform: skew(180deg,210deg);
  position: absolute;
  top: 43px;
}
.square2{
  width:100px;
  height:100px;
  background:#c52329;
  float:left;
  transform: skew(180deg,150deg);
  position: absolute;
  left:102px;
  top: 43px;
}
.square3{
  width:110px;
  height:110px;
  background:#c52329;
  float:left;
  transform: rotate(45deg) skew(-15deg, -15deg);
  position: absolute;
  left: 46px;
  top: -42px;
}
<div class="mainDiv">
  <div class="square"></div>
  <div class="square2"></div>
  <div class="square3"></div>
</div>
14
Thatkookooguy

Permettez-moi d'abord de souligner qu'un skew angle doit être compris entre -90deg et 90deg, non inclus. Tous vos biais se situent bien en dehors de cette plage.

En me limitant à des nombres asymétriques sensibles, cela s'est avéré assez simple:

.mainDiv{
  position: relative;
  width: 206px;
  height: 190px;
  margin: 0px auto;
  margin-top:100px;
}
.tile {
  width:100px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  position: absolute;
}
.square{
  transform: skewY(30deg);
  top: 43px;
}
.square2{
  transform: skewY(-30deg);
  left:102px;
  top: 43px;
}
.square3{
  height: 58px;
  left: 50px;
  top: -18px;
  transform: skew(60deg, -30deg);
}
<div class="mainDiv">
  <div class="tile square"></div>
  <div class="tile square2"></div>
  <div class="tile square3"></div>
</div>

Travail accompli. J'ai également rangé l'énorme répétition des styles dans une classe commune pour vous.

7
Niet the Dark Absol

Utilisez le css suivant pour .square3:

.square3{
  width:110px;
  height:110px;
  background:#c52329;
  float:left;
  transform: rotate(45deg) skew(-15deg, -15deg);
  position: absolute;
  left: 46px;
  top: -42px;
}
6
user6139793

Changer le CSS pour .square3 devrait le faire:

height: 58px;
left: 50px;
position: absolute;
top: -18px;
transform: skew(240deg, 150deg);
width: 100px;

https://jsfiddle.net/8vuj7peb/26/

6
Nick R

Une seule boîte et 2 pseudos peuvent également le faire.

http://codepen.io/gc-nomade/pen/vGeajp

#square {

  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: #C52329;
  /*box-shadow: 0 0 5px;*/
  width: 90px;
  height: 150px;
  margin: 5em;
  position: relative;
  transform: skew(30deg) rotate(30deg);
}

#square:before,
#square:after {
  display: inherit;
  align-items: center;
  justify-content: center;
  content: 'before';
  position: absolute;
  top: 0;
  left: 2px;
  right: -2px;
  bottom: 0;
  background: inherit;
  border-radius: inherit;
  box-shadow: inherit;
  transform: translate(100%, -31%) skew(0, -45deg) rotate(0deg);
}
#square:after {
  content: 'after';
  top: -2px;
  left: 0%;
  height: 60%;
  right: 0;
  bottom: 2px;
  transform: translate(50%, -100%) rotate(0deg)skew(-45deg)
}
<div id="square">
  boxe
</div>
6
G-Cyr

J'ai vu cela et j'ai pensé ajouter quelque chose que j'ai trouvé en essayant de faire des blocs abc à l'ancienne. En les transformant en 3D, je n'avais qu'à étiqueter le conteneur principal avec une autre classe pour changer de position et enregistré sur le code. J'ai commenté le tutoriel dans le code. J'espère que cela aide quelqu'un. :)

          
/*-------------------------------------------------------------   
First we need to create our container for later reference
    -I put this to show in the center of the screen if you wanted to 
    copy and paste the code into a document for play. 
    -The width is just to give the margin auto something to center on. 
    -You really on need the element itself to reference later, but this is prettier
-------------------------------------------------------------*/
.box{
    width: 100px;
    margin: 200px auto;
    text-align: center;
    line-height: 5;
}

/*---------------------------------------------------------------------------
The box-wrapper is our real hero container here. This is where we nail our box together. 
    -set this to relative position for child elements to reference to.
    -transform-style is set to preserve-3d because I wanted to keep the look as the text turns with the box. You can also set this to flat, but its not near as cool. 
---------------------------------------------------------------------------*/


.box-wrapper{
    position: relative;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;    
}
/*-------------------------------------------------------------------------
Here I am just giving the box its needed dimesions and setting them to absolute so nothing gets any ideas of wandering off.
    -PLEASE NOTE: the border has 2px and our w:98 h:98 making it a total of 100px. (this is important when we translate later)
-------------------------------------------------------------------------*/
.box-wrapper div{
    width: 98px;
    height: 98px;
    position: absolute;    
    border: 2px solid black;
    border-radius: 5px;
}

/*----------------------------------------------------------------------
Since our sides are 100px we only need to move our box sides 50px to get the edges to match up without gaps.
    -Meaning "translate" moves to the position relative to your .box-wrapper. (You can play with this code to see it in action, try to take a visible section of the box and take it down 10). 
    -Also I use "rotate" y and x to turn our box sheets (.box-wrapper div's)
-----------------------------------------------------------------------*/
.front{
    transform: translateZ(50px) rotateY(0deg);
}
.back{
    transform: translateZ(-50px) rotateY(180deg);
}
.top{
    transform: translateY(-50px) rotateX(90deg);
}
.bottom{
    transform: translateY(50px) rotateX(-90deg);
}

.right{
    transform: translateX(50px) rotateY(90deg);
}
.left{
    transform: translateX(-50px) rotateY(270deg);
}

/*-----------------------------------------------------------------------
Then after all of this we can use our cool box-wrapper to turn this baby
Hope this is helpful! :) Enjoy!
-------------------------------------------------------------------------*/

.box .box-wrapper{
    transform: rotateX(-30deg) rotateY(-40deg);
}
.box .box-wrapper div{
    background-color: yellow;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bob the box builder</title>
        <link rel="stylesheet" type="text/css" href="boxstyle.css">
        <style>
            

        </style>
    </head>
    <body>
<!--Create our box that holds our stuff -->
           <div class="box">
<!--Create our real container that keeps our box sides nailed together-->
                    <div class="box-wrapper">
<!--Make our box sheets that we will nail together with css-->
                        <div class="front">Front</div>
                        <div class="back">Back</div>
                        <div class="left">Left</div>
                        <div class="right">Right</div>
                        <div class="top">Top</div>
                        <div class="bottom">Bottom</div>
                    </div>
                </div>
    </body>
</html>
1
HeroZero