Online 3D Cube Rotation Animation Generator
Create interactive and visually engaging 3D cube rotation animations directly in your browser. This tool allows you to customize cube size, rotation speed, direction, and animation style, while instantly generating clean CSS and HTML code for your projects.
The 3D Cube Rotation Animation Generator helps developers quickly create complex 3D animations without writing everything from scratch. Customize, preview, and export clean code instantly for your projects.
Contents
Features
- Live 3D cube preview
- Adjustable rotation speed
- Axis control (X, Y, Z)
- Infinite or hover animation
- Cube size customization
Customize and preview your 3D cube animation in real time with interactive controls for cube size, rotation speed, and rotation direction. Instantly see how your settings affect the animation and generate production-ready code tailored to your design needs, making it easy to build dynamic 3D effects without manual effort.
Preview:
HTML and CSS Code:
<div class="cube-container">
<div class="cube">
<div class="front">Front</div>
<div class="back">Back</div>
<div class="right">Right</div>
<div class="left">Left</div>
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
</div>.cube-container {
width: 200px;
height: 200px;
perspective: 600px;
margin: 100px auto;
}
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
animation: rotateCube 10s infinite linear;
}
.cube > div {
position: absolute;
width: 100%;
height: 100%;
border: 0px solid #ccc;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.cube .front {
transform: rotateY(0deg) translateZ(100px);
background-color: rgba(231, 77, 60, 0.5);
}
.cube .back {
transform: rotateY(180deg) translateZ(100px);
background-color: rgba(52, 152, 219, 0.5);
}
.cube .right {
transform: rotateY(90deg) translateZ(100px);
background-color: rgba(46, 204, 112, 0.5);
}
.cube .left {
transform: rotateY(-90deg) translateZ(100px);
background-color: rgba(241, 196, 15, 0.5);
}
.cube .top {
transform: rotateX(90deg) translateZ(100px);
background-color: rgba(156, 89, 182, 0.5);
}
.cube .bottom {
transform: rotateX(-90deg) translateZ(100px);
background-color: rgba(255, 119, 0, 0.5);
}
@keyframes rotateCube {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}Create smooth horizontal 3D cube rotations that spin along the Y-axis, giving a left-to-right or right-to-left movement effect. This style is ideal for showcasing content on cube faces in a carousel-like animation, adding depth and interactivity to modern UI designs.
Preview:
<div class="cube-container">
<div class="cube-horizontal-direction">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>.cube-container {
perspective: 1000px;
}
.cube-horizontal-direction {
--width: 150px;
--height: 150px;
position: relative;
width: var(--width);
height: var(--height);
transform-style: preserve-3d;
animation: rotate_cube_horizontal 5s linear infinite;
}
.face {
position: absolute;
width: 100%;
height: 100%;
background: rgba(195, 0, 255, 0.418);
border: 2px solid #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
/* Positioning faces */
.face.front { transform: rotateY(0deg) translateZ(calc(var(--width) / 2)) }
.face.back { transform: rotateY(180deg) translateZ(calc(var(--width) / 2)) }
.face.right { transform: rotateY(90deg) translateZ(calc(var(--width) / 2)) }
.face.left { transform: rotateY(-90deg) translateZ(calc(var(--width) / 2)) }
.face.top { transform: rotateX(90deg) translateZ(calc(var(--width) / 2)) }
.face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--width) / 2)) }
/* Animation */
@keyframes rotate_cube_horizontal {
from { transform: rotateY(0deg) }
to { transform: rotateY(360deg) }
}Apply vertical 3D cube rotations along the X-axis to achieve an up-and-down flipping effect. This animation is perfect for revealing content dynamically, creating engaging transitions, and enhancing visual hierarchy with a realistic 3D perspective.
Preview:
<div class="cube-container">
<div class="cube-vertical-direction">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>.cube-container {
perspective: 1000px;
}
.cube-vertical-direction {
--width: 150px;
--height: 150px;
position: relative;
width: var(--width);
height: var(--height);
transform-style: preserve-3d;
animation: rotate_cube_vertical 5s linear infinite;
}
.face {
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 0, 0, 0.418);
border: 2px solid #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
/* Positioning faces */
.face.front { transform: rotateY(0deg) translateZ(calc(var(--width) / 2)) }
.face.back { transform: rotateY(180deg) translateZ(calc(var(--width) / 2)) }
.face.right { transform: rotateY(90deg) translateZ(calc(var(--width) / 2)) }
.face.left { transform: rotateY(-90deg) translateZ(calc(var(--width) / 2)) }
.face.top { transform: rotateX(90deg) translateZ(calc(var(--width) / 2)) }
.face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--width) / 2)) }
@keyframes rotate_cube_vertical {
from { transform: rotateX(0deg) }
to { transform: rotateX(360deg) }
}Apply background images to each face of the 3D cube to create visually rich and immersive animations. This approach ensures perfect alignment and full coverage of each face while maintaining smooth rotation effects. It is ideal for showcasing images, galleries, or branded visuals within a dynamic 3D cube layout
Preview:
<div class="cube-container">
<div class="cube">
<div class="face image-front"></div>
<div class="face image-back"></div>
<div class="face image-right"></div>
<div class="face image-left"></div>
<div class="face image-top"></div>
<div class="face image-bottom"></div>
</div>
</div>.cube-container {
perspective: 1000px;
}
.cube {
--size: 150px;
position: relative;
width: var(--size);
height: var(--size);
transform-style: preserve-3d;
animation: rotate_cube_images 5s linear infinite;
}
.face {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(114, 114, 114, 0.39);
border: 1px solid #fff;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.face.image-front {
background-image: url("/images/demo/green-leaves.webp");
transform: rotateY(0deg) translateZ(calc(var(--size) / 2))
}
.face.image-back {
background-image: url("/images/demo/avocado.webp");
transform: rotateY(180deg) translateZ(calc(var(--size) / 2))
}
.face.image-right {
background-image: url("/images/demo/grapes.webp");
transform: rotateY(90deg) translateZ(calc(var(--size) / 2))
}
.face.image-left {
background-image: url("/images/demo/orange.webp");
transform: rotateY(-90deg) translateZ(calc(var(--size) / 2))
}
.face.image-top {
background-image: url("/images/demo/strawberry.webp");
transform: rotateX(90deg) translateZ(calc(var(--size) / 2))
}
.face.image-bottom {
background-image: url("/images/demo/red-apple.webp");
transform: rotateX(-90deg) translateZ(calc(var(--size) / 2))
}
@keyframes rotate_cube_images {
from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) }
to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg) }
}