Forums Tout JavaScript

bonjour à tous après avoir conçu un Cube en perspective cavalière en html et css:

HTML

       <div class="cube">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
         
        </div>

CSS

Code : Tout sélectionner

.cube{
    position: relative;
    width: 40vmin;
    height: 40vmin;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(25deg);
}

.cube  span{
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 1px bisque;
    background: rgba(185, 43, 43, 0.5);
}

.cube  span:nth-child(1){
    transform: rotateX(0deg) translate3d(0,0,20vmin);
}

 .cube  span:nth-child(2){
    transform: rotateY(90deg) translate3d(0,0,-20vmin);
} 


.cube  span:nth-child(3){
    border-right: dashed 2px #fff;
    border-bottom: dashed 2px #fff;
    transform: rotateY(90deg) translate3d(0,0,20vmin);
} 

.cube  span:nth-child(4){
    border-right: dashed 2px #fff;
    border-top: dashed 2px #fff;
    transform: rotateX(90deg) translate3d(0,0,-20vmin);
} 


.cube  span:nth-child(5){
    transform: rotateX(90deg) translate3d(0,0,20vmin);
} 

.cube  span:nth-child(6){
    border-right: dashed 2px #fff;
    border-bottom: dashed 2px #fff;
    transform: rotateX(0deg) translate3d(0,0,-20vmin);

}

je bloque sur la réalisation d'une pyramide (même principe que le cube)

HTML

Code : Tout sélectionner

      <div class="pyramide">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
         
        	</div>

CSS

Code : Tout sélectionner

.pyramide{
    position: relative;
    width: 40vmin;
    height: 40vmin;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(25deg);
}

.pyramide  span{
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 1px bisque;
    background: rgba(185, 43, 43, 0.5);
}

.pyramide  span:nth-child(1){
    transform: rotateX(0deg)  translate3d(0,0,20vmin);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

 .pyramide  span:nth-child(2){
    transform: rotateY(90deg) translate3d(0,0,-20vmin);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
} 


.pyramide  span:nth-child(3){
    border-right: dashed 2px #fff;
    border-bottom: dashed 2px #fff;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: rotateY(90deg) translate3d(0,0,20vmin);

} 

.pyramide  span:nth-child(4){
    border-right: dashed 2px #fff;
    border-top: dashed 2px #fff;
    transform: rotateX(90deg) translate3d(0,0,-20vmin);
} 



.pyramide  span:nth-child(5){
    border-right: dashed 2px #fff;
    border-bottom: dashed 2px #fff;
    transform: rotateX(0deg) translate3d(0,0,-20vmin);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

}

Si y'en a qui ont des solutions je suis preneur

Bonjour,

Très impressionnant cette mise en forme via CSS pur

Je n'ai pas la solution, mais je pense que la solution pourrait être dans la propriété CSS :

Code : Tout sélectionner

transform: matrix()

Va falloir faire chauffer les neurones !

Merci beaucoup, oui je code tout en html css pur sans passer par des frameworks , idem pour java script
En terme de performance ya pas photo (même si il faut plus de ligne de code)

J'aime bien aussi, même si ca fait parfois mal à la tête

Bonjour,
Le code demande énormément d'éléments auxquels il faut penser, personnellement j'ai beaucoup de temps à tout apprendre. ^^ C'est bien ce que vous avez en tout cas et ça m'aide à avancer.

Forums Tout JavaScript

pyramide html css

pyramide html css

Re: pyramide html css

Re: pyramide html css

Re: pyramide html css

Re: pyramide html css