For a long time, I have been planning to write an article about something, I was clueless about what to write. Lately, I have seen a couple of posts regarding 3D objects done by Web Developers, so I decided to do a project myself and share my approach on creating a 3D object using an NES Cartridge as an example.
The game cover I have used is Megaman 2, game produced by Capcom in 1988 and is one of the most famous in the franchise.
The HTML set up
In the following HTML, I have set the wrapper id within a div tag and the front class within the section tag which is the part that stands out of the cartridge, with li tags to represent the multiple rectangles within the cartridge as seen in the code.
One main thing I have to work on is giving more creative names for Id'S and classes so bear with me.
<div id="wrapper">
<div class="catridge">
<section class="front">
<img src="http://www.mobygames.com/images/covers/l/43085-mega-man-2-nes-front-cover.jpg"
alt="nes cover"
id="cover-pic" >
<span class="triangle-down"></span>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li id="lastLine"></li>
<!-- small rectangles left to the picture-->
</ul>
</section>
</div>
<!-- front side of the catridge-->
<div class=leftSide></div>
<div class="rightSide"></div>
<!-- sides-->
<div class="top"></div>
<div class="bottom"></div>
<!--Top and bottom-->
<div class="catridgeHoleLeft"></div>
<div class="catridgeHoleRight"></div>
<div class="catridgeHoleBackSide"></div>
</div>
</div>
</div>
Additionally, I have put the sides of the Z axis for the left side and right side, also I have added the top and bottom of the cartridge.
With the addition of CSS we will be shaping, adding size and colour to the object in the following code :
#wrapper{
background:rgb(156, 156, 156);
width: 30.95em;
height: 35.7em;
margin:8% auto 10%auto;
border-bottom-right-radius:6px;
border-bottom-left-radius: 6px;
transform-style:preserve-3d;
border: solid 1px black;
}
.front{
background: rgb(156, 156, 156);
height: 40em;
width:26.3em;
margin:0px 2.15em auto;
box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.6);
}
ul{
width:14%;
margin:-415px 15px;
border-right: 1px solid black;
border-left: 1px solid black;
text-align: center;
box-shadow:inset 0 0 3px rgba(0, 0, 0, 0.66);
}
li{
background:rgb(180, 176, 176);
height: 1em;
list-style: none;
margin:10px 0px 10px -31px;
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.76);
width:5em;
border-radius: 1.5px;
}
The shape and set-up at the end turns out like this:
When the shaping of the front page is done, one thing left to do is shaping the sides of the cartridge on the z-Axis.
If you want a more detailed explanation on 3D objecting I highly recommend to check Animating a 3D creeper's head in CSS and JS! by Yann Prono, his article heavily inspired me to try out 3D object creation.
To come back to the topic 🙂
In the following code am sharing my approach to shaping the sides for the Z-Axis
.catridge .leftSide{
position:absolute;
height: 35.7em;
width:3em;
background-color: rgb(156,156,156);
margin: -40.05em -10em;
border:1px solid;
transform: rotateY(100deg) translateZ(132px);
}
.catridge .rightSide{
position:fixed;
height: 35.6em;
width:3em;
background-color: rgb(156,156,156);
margin: -40.05em 34em;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.44);
border:1px solid;
transform: rotateY(255deg) translateZ(70px);
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.6);
}
.catridge .top{
width: 30.9em;
height: 1em;
border-top: 200px ;
border-bottom: 40px solid rgb(156,156,156);
border-left: 9px solid transparent;
border-right: 14px solid transparent;
margin: -40.25em -0.55em;
position: fixed;
transform: rotatex(270deg) translateZ(-25px) translateY(13px);
}
.catridge .bottom{
width: 31em;
height: 1em;
border-top: 200px ;
border-bottom: 40px solid rgb(156,156,156);
border-left: 9px solid transparent;
border-right: 13px solid transparent;
transform: rotatex(270deg) translateZ(-100px) translateY(20px);
margin:0 -0.6em;
}
.catridgeHoleRight{
transform: rotateY(265deg) translateZ(100px) translateY(-5px) translateX(-10px);
height: 4.2em;
width: 3em;
background:rgb(156,156,156);
margin:3.9em 33.2em;
border:1px solid;
box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.6);
}
.catridgeHoleLeft{
transform: rotateY(95deg) translateZ(150px);
height: 4.2em;
width: 3em;
background:rgb(156,156,156);
border:1px solid;
margin:-7.9em -8.9em;
}
.catridgeHoleBackSide{
height: 1.1em;
width:26.58em;
background-color: rgb(156,156,156);
transform: translateZ(-40px) rotateY(180deg) translateX(0px);
margin:-5.5em 2em;
border:1px solid;
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.6);
}
With following Yann Pronos approach in JavaScript to set the cursor tracking method, I have used the same style with a small edit. And it did work perfectly, just with bigger max angle for the x and y-axis.
const followCursor = (element, options = {}) => {
options = Object.assign({}, {
maxAngleX: 30,
maxAngleY: 18,
},
I have decided to use the "em" measure in the first 3D project. The finishing product is set up for the laptops and desktop computers, in some future projects I will put media queries for smaller screens.
This is how the finishing products look like, better check it out full on CodePen🙂
This is the first article that I wrote, I hope you enjoyed it.
By doing more projects am improving every day and am ready to learn new things, write cleaner and better codes, and I hope better Articles 😃.
Again want to give a huge shout-out to Yann for his awesome Article it was a huge inspiration.
A small reminder again to check his awesome Article about 3D object animation
Animating a 3D creeper's head in CSS and JS!
Top comments (0)