How to Create Cube Window with CSS

How to create cube window with css?

border-image with linear-gradient can do it:

.box {
  margin: 10px;
  display: inline-block;
  border-style:solid;
  border-width:2px 2px 15px 15px;
  border-image-slice:2 2 15 15; /* same as border-width*/
  border-image-source:linear-gradient(-45deg,transparent 9px,red 0 calc(100% - 9px),transparent 0);
}

.content {
  padding: 5px;
}

<div class="box">
  <div class="content">
    CONTENT<br> Some more Content
  </div>
</div>

<div class="box">
  <div class="content">
    CONTENT<br> more Content
  </div>
</div>

<div class="box">
  <div class="content">
    AA BB
  </div>
</div>

Making a cube fill entire screen

Simply make the scene element 100vh and consider 50vh inside the translation. Also remove the width to have the default full width:

body { font-family: sans-serif;margin:0; } /* Remove the default margin */
* {  box-sizing:border-box; /* to make sure there is no overflow*/}
.scene {  height: 100vh;}
.cube {  height: 100%;  position: relative;  transform-style: preserve-3d;  transition: transform 1s;}
.cube:hover{  animation: pageDown 1.5s linear forwards;}
@keyframes pageDown{  25%{    transform: scale(0.8);  }  75%{    transform: rotateX(90deg);  }  100%{    transform: scale(1);    transform: rotateX(90deg);  }}
.cube__face {  position: absolute;  width: 100%;  height: 100%;  border: 2px solid black;    /* Optional Styling */  line-height: 200px;  font-size: 30px;  font-weight: bold;  color: white;  text-align: center;}
.cube__face--front  {  background: hsla(  0, 100%, 50%, 1);}
.cube__face--bottom {  background: hsla(300, 100%, 50%, 1);}

.cube__face--front  {  transform: rotateY(0deg) translateZ(50vh);}
.cube__face--bottom {  transform: rotateX(-90deg) translateZ(50vh);  }

<div class="scene">
  <div class="cube">    <div class="cube__face cube__face--front">entry page</div>    <div class="cube__face cube__face--bottom">extra page</div>  </div>  </div>

Fullscreen CSS3 Cube Transition

Well, the calculus that you are asking is quite hard.

The good news is that you don't really need to do it.

Any object placed at 0 in the z direction won't be scaled by the perspective. So, the trick is to place the front face of the cube at z = 0px.

On the other side, to make this responsive, we will need to use viewport units. Like this :

html,body{    margin: 0;    height: 100%;    width: 100%;}
#experiment {    perspective: 200vw;    height: 100%;     width: 100vw;     border: solid 1px blue;}
.cube {    position: relative;    height: 100%;     width: 100vw;     transform-style: preserve-3d;}.face {    position: absolute;    height: 100%;     width: 100%;     color: #fff;    transition: transform 4s linear;}.cube .front {    transform: translateZ(-50vw) rotateY(0deg) translateZ(50vw);     transform-origin: center center;    background-color:gray;}
.cube .side {    transform: translateZ(-50vw) rotateY(-90deg) translateZ(50vw);    background-color:lightgray;}
.cube:hover .front {    transform: translateZ(-50vw) rotateY(90deg) translateZ(50vw); }
.cube:hover .side {    transform: translateZ(-50vw) rotateY(0deg) translateZ(50vw);}

<div id="experiment">    <div id="cube" class="cube" align="center">        <div id="front" class="face front">            front face        </div>        <div id="side" class="face side">            side face        </div>    </div></div>

---

Related Topics