Skip to content

karote00/html-3DCube

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

3D Cube with pure HTML, CSS and JavaScript

No need with any plugin.

  1. Set perspective for container
.cubic-container {
	...
	-webkit-perspective: 2000px;
	perspective: 2000px;
}
  1. Set main element's style with transform-style: preserve-3d
.cube {
	...
	transform-style: preserve-3d;
}
  1. Every single cube's transform should rotate first then translate position. If you change the order, you'll get different result.
.cube .right {
	transform: rotateY(90deg) translateZ(150px);
}