DEV Community

Cover image for 3D CSS Xbox Series

3D CSS Xbox Series

Justin Alexander on October 06, 2020

Introduction For a project at work, I needed to learn some simple 3D CSS techniques. So, I decided as a side project to build an Xbox Se...
Collapse
 
ben profile image
Ben Halpern

Gorgeous!

Collapse
 
jtumain profile image
Justin Alexander

Thanks Ben.

Collapse
 
miguelromerogutierrez profile image
Mike Romero

Looks awesome!, just one question: Why use css instead of canvas?

Collapse
 
zdev1official profile image
ZDev1Official

To be more complex than a simple canvas

Collapse
 
jtumain profile image
Justin Alexander

I did a little stuff with BabylonJS whilst learning 3D, but continued to work with just CSS in the end for this demo. I just found it quicker to achieve what I wanted.

Collapse
 
qainsights profile image
NaveenKumar Namachivayam ⚡

Excellent

Collapse
 
qier222 profile image
qier222

Amazing!

Collapse
 
howdyankit profile image
ANKIT_PAL • Edited

do you have any resources/articles on making 3d Faces and allowing them to move along with the move of Cursor?

Collapse
 
jtumain profile image
Justin Alexander

Sorry I haven't. When you say faces do you mean a side of a 3d element or do mean an actual face that moves it's eyes to the cursor?

Collapse
 
howdyankit profile image
ANKIT_PAL

yeah somewhat like that.when a cursor moves the face and eyes also moves

Collapse
 
andrewbaisden profile image
Andrew Baisden

Wow impressive should we take this as a sign that you bought the new Xbox and not the Playstation 5?

Collapse
 
jtumain profile image
Justin Alexander

Haha. Neither yet. Waiting for some exclusives before making an initial decision.

Collapse
 
zdev1official profile image
ZDev1Official

Wow!
Nice job 👍

Collapse
 
anders profile image
Anders

That is awesome : )

Collapse
 
rajasekharguptha profile image
Rajasekhar Guptha

Awesome !

Collapse
 
angelmtztrc profile image
Angel Martinez

Very nice!

Collapse
 
acupoftee profile image
Tee

Nice use of transformations, transitions, and resizing here. My machine doesn’t have a discrete graphics card, and this ran smoothly with no heat dissipation whatsoever. Awesome job.