Is it possible to use CSS and HTML to rotate a cube and expand its sides?

I am attempting to rotate the cube and expand its faces. I have experimented with the following code:

.wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
 }
 .cube-wrap {
     width: 40px;
     height: 40px;
     -webkit-perspective: 2000px;
     -webkit-perspective-origin: 50% -500px;
 }
 .single-box {
     background-size: cover;
     display: block;
     position: absolute;
     width: 40px;
     height: 40px;
     background-color: #60c2ef;
    -webkit-transform: rotateY(45deg) translateZ(-200px) rotateX(15deg);
    -webkit-transform-origin: 50% 50% 0;            
 }
 .box {
     -webkit-transform-style: preserve-3d;
     -webkit-animation: rotate 1.5s infinite ease;
 }
 .side-front {
     animation: side-front-animation 3s ease infinite;
     animation-delay: 100ms;
     transform: rotateY(0deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: translateZ(20px);
 }
 .side-back {
     animation: side-back-animation 3s ease infinite;
     animation-delay: 100ms;
     transform: rotateY(-180deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     border: #ffffff;
     -webkit-transform: rotateY(180deg) translateZ(20px);
 }
 .side-top {
     animation: side-top-animation 3s ease infinite;
     animation-delay: 0;
     transform: rotateX(90deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: rotateX(90deg) translateZ(20px);
 }
 .side-bottom {
     animation: side-bottom-animation 3s ease infinite;
     animation-delay: 0;
     transform: rotateX(-90deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: rotateX(-90deg) translateZ(20px);
 }
 .side-left {
     animation: side-left-animation 3s ease infinite;
     animation-delay: 100ms;
     transform: rotateY(-90deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: rotateY(-90deg) translateZ(20px);
 }
 .side-right {
     animation: side-right-animation 3s ease infinite;
     animation-delay: 100ms;
     transform: rotateY(90deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: rotateY(90deg) translateZ(20px);
 }


 @-webkit-keyframes rotate {
     0% { -webkit-transform: rotateY(0); }
     100% { -webkit-transform: rotateY(360deg); }
 } 

 @-webkit-keyframes side-top-animation {
     0% { opacity: 1; transform: rotateX(90deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateX(90deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateX(90deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateX(90deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateX(90deg) translateZ(150px) }
 }

 @-webkit-keyframes side-bottom-animation {
     0% { opacity: 1; transform: rotateX(-90deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateX(-90deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateX(-90deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateX(-90deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateX(-90deg) translateZ(150px) }
 }

 @-webkit-keyframes side-front-animation {
     0% { opacity: 1; transform: rotateY(0deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateY(0deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateY(0deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateY(0deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateY(0deg) translateZ(150px) }
 } 
 @-webkit-keyframes side-back-animation {
     0% { opacity: 1; transform: rotateY(-180deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateY(-180deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateY(-180deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateY(-180deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateY(-180deg) translateZ(150px) }
 }

 @-webkit-keyframes side-left-animation {
     0% { opacity: 1; transform: rotateY(-90deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateY(-90deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateY(-90deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateY(-90deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateY(-90deg) translateZ(150px) }
 }
 @-webkit-keyframes side-right-animation {
     0% { opacity: 1; transform: rotateY(90deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateY(90deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateY(90deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateY(90deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateY(90deg) translateZ(150px) }
 }

 <div class="wrapper">
     <div class="cube-wrap">
         <div class="box">
             <div class="single-box side-back"></div>
             <div class="single-box side-top"></div>
             <div class="single-box side-bottom"></div>
             <div class="single-box side-left"></div>
             <div class="single-box side-right"></div>
             <div class="single-box side-front"></div>
        </div>
    </div>
</div>

The provided code successfully rotates and spins, however, the faces are not close enough to resemble a cube. How can this be rectified?

Could someone assist me with this issue? Thank you.

I am unsure of how to incorporate animations into the cube faces to achieve the desired appearance similar to the image below.

htmlcss

Answer №1

To transform your code, modify the height and width of .single-box to 150px for consistency in box sizing. Subsequently, adjust the height and width of .cube-wrap to match the dimensions of .single-box.

The resulting code snippet should resemble the following:

.wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
 }
 .cube-wrap {
     width: 130px;
     height: 130px;
     -webkit-perspective: 2000px;
     -webkit-perspective-origin: 50% -500px;
 }
 .single-box {
     background-size: cover;
     display: block;
     position: absolute;
     width: 130px;
     height: 130px;
     background-color: #60c2ef;
    -webkit-transform: rotateY(45deg) translateZ(-200px) rotateX(15deg);
    -webkit-transform-origin: 50% 50% 0;            
 }
 .box {
     -webkit-transform-style: preserve-3d;
     -webkit-animation: rotate 1.5s infinite ease;
 }
 .side-front {
     animation: side-front-animation 3s ease infinite;
     animation-delay: 100ms;
     transform: rotateY(0deg) translateZ(300px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: translateZ(20px);
 }
 .side-back {
     animation: side-back-animation 3s ease infinite;
     animation-delay: 100ms;
     transform: rotateY(-180deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     border: #ffffff;
     -webkit-transform: rotateY(180deg) translateZ(20px);
 }
 .side-top {
     animation: side-top-animation 3s ease infinite;
     animation-delay: 0;
     transform: rotateX(90deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: rotateX(90deg) translateZ(20px);
 }
 .side-bottom {
     animation: side-bottom-animation 3s ease infinite;
     animation-delay: 0;
     transform: rotateX(-90deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: rotateX(-90deg) translateZ(20px);
 }
 .side-left {
     animation: side-left-animation 3s ease infinite;
     animation-delay: 100ms;
     transform: rotateY(-90deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: rotateY(-90deg) translateZ(20px);
 }
 .side-right {
     animation: side-right-animation 3s ease infinite;
     animation-delay: 100ms;
     transform: rotateY(90deg) translateZ(150px);
     animation-fill-mode: forwards;
     transform-origin: 50% 50%;
     background-color: #007dc5;
     -webkit-transform: rotateY(90deg) translateZ(20px);
 }


 @-webkit-keyframes rotate {
     0% { -webkit-transform: rotateY(0); }
     100% { -webkit-transform: rotateY(360deg); }
 } 

 @-webkit-keyframes side-top-animation {
     0% { opacity: 1; transform: rotateX(90deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateX(90deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateX(90deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateX(90deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateX(90deg) translateZ(150px) }
 }

 @-webkit-keyframes side-bottom-animation {
     0% { opacity: 1; transform: rotateX(-90deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateX(-90deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateX(-90deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateX(-90deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateX(-90deg) translateZ(150px) }
 }

 @-webkit-keyframes side-front-animation {
     0% { opacity: 1; transform: rotateY(0deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateY(0deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateY(0deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateY(0deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateY(0deg) translateZ(150px) }
 } 
 @-webkit-keyframes side-back-animation {
     0% { opacity: 1; transform: rotateY(-180deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateY(-180deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateY(-180deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateY(-180deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateY(-180deg) translateZ(150px) }
 }

 @-webkit-keyframes side-left-animation {
     0% { opacity: 1; transform: rotateY(-90deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateY(-90deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateY(-90deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateY(-90deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateY(-90deg) translateZ(150px) }
 }
 @-webkit-keyframes side-right-animation {
     0% { opacity: 1; transform: rotateY(90deg) translateZ(150px)}  
     20% { opacity: 1; transform: rotateY(90deg) translateZ(75px)}  
     70% {  opacity: 1; transform: rotateY(90deg) translateZ(75px) }
     90% {  opacity: 1; transform: rotateY(90deg) translateZ(150px) }
     100% {  opacity: 1; transform: rotateY(90deg) translateZ(150px) }
 }
<div class="wrapper">
        <div class="cube-wrap">
            <div class="box">
                <div class="single-box side-back"></div>
                <div class="single-box side-top"></div>
                <div class="single-box side-bottom"></div>
                <div class="single-box side-left"></div>
                <div class="single-box side-right"></div>
                <div class="single-box side-front"></div>
           </div>
       </div>
   </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

challenges arising from using the css overflow: hidden attribute

Struggling with a popup displaying issue caused by an overflow: hidden property on the containing div. The background graphics of the popup are crossing over due to this setting, leading to a display problem where the width is cut off at the overflow bound ...

jqueryhtmlcssdhtml

Display a particular frame upon the initial loading of a Lottie animation

I've successfully integrated a lottie animation into my code. On the initial load, I'd like to display a specific frame. When the user hovers over it, I want the animation to start from the beginning and play through in its entirety. Here's ...

htmljsonanimationlottiebodymovin

Is it feasible to send a GET form to two separate views using two buttons?

On one view, I have a form that functions perfectly. http://myurl.com/myapp/filter_objects/?risk__worktask=1&craft=3 In another view, I need to export the filtered list to a PDF. Currently, I store the results in session and access the list from ther ...

htmldjangoformsget

Is there a way to upload multiple files using expressjs?

I'm looking for a way to efficiently send multiple files, including an entire directory, so that I can access them in another JavaScript file called from an HTML file. const app = require("express")(); const http = require("http"). ...

javascripthtmlnode.jsexpress

Set the div element to be horizontally aligned

Is there a way to make this display horizontally instead of vertically, from left to right rather than top to bottom? I attempted using display:flex but only the extra-text class is affected and not the outer div. https://i.stack.imgur.com/2DNoC.png .m ...

htmlcss

Creating a Dynamic List in JQuery Fancy Box for an iframe

I am new to using JQuery and I have a table with a checkbox. When the checkbox is clicked, I want a dynamic list to appear in a pop-up window. I've been having trouble implementing this. <html> <head> <label align="center">Select a ...

jqueryhtmljquery-uifancybox

What is the best way to arrange <div> elements with text inside without moving the text?

I need help figuring out how to stack one or more <div> elements on top of another <div> element while maintaining the text content within each. My issue is illustrated in this fiddle: https://jsfiddle.net/rd268ucy/1/. When attempting to drag o ...

javascripthtmlcss

Troubleshooting EasyTabs: Localhost Issue with Ajax Tab Configurations

I've implemented EasyTabs for organizing my tabs on a webpage. I decided to use ajax-tabs functionality in order to fetch content from other pages when users click on the navigation menu buttons. However, I've encountered an issue where the conte ...

javascriptjquerycssajaxtabs

What is the best way to deactivate certain JavaScript functions on my webpage when accessed through a mobile device?

Is there a way to disable specific JavaScript functions when accessing my website from a mobile device? While I can achieve this using CSS only, certain buttons require JavaScript functionality. Below is the internal JavaScript code: var menuBtn = docume ...

javascripthtmlresponsive

Designing a unique pagination layout for your WordPress website

Currently, I am working on a WordPress project. I have created my own template using CSS and HTML format. The implementation is going well, but I am facing difficulty integrating WP pagination design into my template. Below is the pagination code from my ...

phphtmlcsswordpress

Using a combination of CSS selector, several attributes, and the OR operator

Can you assist me with CSS selectors? Let's say we have a style HTML tag: <style type="text/css"> [...selector...] {color:red;} </style> I want to create a selector with multiple attributes and logical operators, but I am uncertain about ...

csscss-selectors

Ways to retrieve the chosen option in a dropdown list without specifying the dropdown's name, id,

Custom dropdown, Model-View-Controller Code @foreach (var attribute in Model) { string controlId = string.Format("product_attribute_{0}_{1}_{2}", attribute.ProductId, attribute.ProductAttributeId, attribute.Id); @switch (attribute.AttributeControl ...

javascriptjqueryhtmlasp.net-mvc

Adding dashes as padding in HTML/CSS

I am currently working on updating the user management block on my website and I want to showcase it with some visual examples. I believe that using images is the most effective way to demonstrate changes. This is the current appearance of the block: ...

htmlcss

Vanishing Span in CSS3 Flexboxes

I came across this particular HTML code: <div class="panel panel-info"> <div class="panel-heading">Person</div> <div class="panel-body"> <div class="data"> <p class="keys"> ...

htmlangularjscssflexbox

Is there a way to adjust the background hues of a React component when a click event is triggered?

Currently, I have 3 React components that each consist of a div element. When I click on one component, I want to change its background color to black. If I then select another component, the previously selected component should return to its normal back ...

cssreactjs

Learn how to use CSS flexbox to easily vertically center items within a container with a full-height background

I'm having trouble with aligning text vertically centered within a box and making sure the background color stretches to full height. HTML: <div class="feature-content"> <div class="feature-visual"> <div class="embed-container"> ...

cssflexbox

On screens with smaller dimensions, the divs intersect with each other

I have a project where I need to style each letter in its own box, arranged next to each other or in multiple rows with spacing between them. Everything looks great until I resize the screen to a smaller size or check it on mobile - then the letters in the ...

htmlcssruby-on-railsmargin

Creating a display of divs that flow from left to right in each row, and then stacking the rows from bottom to top using CSS and jQuery

My current dilemma involves a collection of divs that must be displayed in a specific order, but with a rather intricate layout. Essentially, this is the structure of my HTML: <div> <div class="box">1 (first in list)</div> <di ...

javascriptjqueryhtmlcss

Encountering a 503 Error in Loading .js Files from Index.html in a .NET 7.0 Angular Application

I recently came into possession of an Angular project that I am trying to set up in IIS, but I am encountering some unusual behavior. Since I am relatively new to Angular, I ask for your patience as I navigate through this issue. Upon loading the website, ...

javascriptc#htmlangular

Design concept - Trigger an action upon clicking a checkbox within a table row

I've been working on implementing a selectable table using material design. I want to trigger an action when a checkbox in a table row is clicked, but my attempts with jQuery have not been successful. Here's the structure of my table: <table ...

jqueryhtmlmaterial-designmaterial-design-lite