How would I make a 2D cube on an axis? in CSS?

Like this.
https://www.mathworks.com/help/symbolic/mupad_ref/box-d0e163.png

With no animation.

I found this code and removed the animation from it:

body {
  color: #fff;
  font: 600 24px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
  margin: 12px 45px;

}
.cube {
  position: relative;
  width: 95px;
}
.side {
  height: 95px;
  line-height: 95px;
  position: absolute;
  text-align: center;
  width: 95px;
}
.top {
  background: #33cc54;
  transform: rotate(-45deg) skew(15deg, 15deg);
}
.left {
  background: #2db34a;
  transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
}
.right {
  background: #26973e;
  transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
}
<div class="cube spin">
  <figure class="side top">1</figure>
  <figure class="side left">2</figure>
  <figure class="side right">3</figure>
</div>

Originally:

Can you add a border to a 2d cube?

border: solid 5px red;

on each side. Got it!

Question 1.)

How would I place an image inside each of the cubes? Can someone help me with this please?

<div class="image"></div>

div.image:before {
   content:url(http://placehold.it/120x120);
}

Question 2.)

Would it be possible to add a box-shadow to one of the squares?


<style type="text/css"> 

html {
  width: 100%;
  height: 100%;
}

body {
  background: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
 
 
}

.box {
  box-shadow: 
0 0 0 5px orange,
0 0 0 10px black,
0 0 0 15px #1155cc,
0 0 0 20px black,
0 0 0 25px orange,
0 0 0 30px black,
0 0 0 35px #1155cc,
0 0 0 40px black,
0 0 0 45px orange,
0 0 0 50px black,
0 0 0 55px #1155cc,
0 0 0 60px black,
0 0 0 65px orange,
0 0 0 70px black,
0 0 0 75px #1155cc,
0 0 0 80px black,
0 0 0 85px orange;
}


</style>

</head>
<body>


<div class="box"></div>

Got it:


.left {
   background: url(http://placehold.it/120x120);
  border: solid 5px red;
  transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);

Can someone help me with Question 2 please?

About adding box-shadow to a single square.

How would I assign box-shadow to a single square?

Does this do what you wish? If not, a drawing or make-believe screen-shot would help.

(add to .top, .left, or .right)

  box-shadow:0 0 3px 3px #000;  /* possibly include "inset" option */
  z-index:1;

Only tested in FF.

It’s going around it, not on inside of the square itself.

I think I added a note that said that you might want to consider the “inset” option…

Instead of the box shadow in post #10, try this:

  box-shadow:
    0 0 0 5px #f00 inset,
    0 0 0 10px #ffa500 inset,
    0 0 0 15px #000 inset,
    0 0 0 20px #00f inset,
    0 0 0 25px #000 inset,
    0 0 0 30px #ffa500 inset,
    0 0 0 35px #000 inset;
  z-index:1;

Anytime that you want to know more about any property, you can always look it up.

This resource is easy to understand and offers an easy premade playground.

https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

1 Like

thank you.

1 Like

How would I auto scale an image to fit inside a square?

.left {
   background: url(http://i.imgur.com/vVQZTjQ.jpg) width:100% height:auto;
1 Like

Thanks.

background-size: cover;

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.