CSS3: div like a qube

Question

I want create 2 divs like this picture

2 divs like this

i have tried this for div 1 but it doesnt look good. can you help me please?

.div1 { 
-webkit-transform:perspective(2500px) rotate3d(1, 0, 0, 46deg);
-webkit-transform-origin:100% 0%;
-webkit-transform-style:preserve-3d;

}

Go read this : http://stackoverflow.com/questions/5293736/css3-transform-skew — Milche Patern, Mar 04 '13 at 16:46

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

transform-style:preserve-3d; is something you use when you have nested 3D transformed elements and you want to create a realistic 3D look (and you apply it on the parent element in that case). You have no need for it here.

The effect you want is actually really simple to achieve:

DEMO

HTML:

<div class='parent'>
  <div class='div1'>div1</div>
  <div class='div2'>div2</div>
</div>

Relevant CSS:

.parent { perspective: 20em; }
.div1 {
  transform: rotateX(30deg);
  transform-origin: 0 100% 0;
}

CSS3: div like a qube

1 Answers1

DEMO