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.

https://i.sstatic.net/ZQxSS.png

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

Is there a way to insert text onto an Isotope image?

I recently created a portfolio using Isotope and Jquery, but I am struggling to add descriptive text to my images without disrupting the layout of the portfolio. I have experimented with various options such as using position:relative for the images and p ...

jquerycssblogs

Yet again faced with an annoying gap between table rows and cells, for the 532nd instance

Once again, tables have defeated me. I am struggling with a simple table: <table style="width: 200px; margin: 20px auto; border-collapse: collapse; border-spacing: 0; border: none;"> <tr style="margin: 0; padding: 0; border: none; border-colla ...

htmlcss

How to Extract Text Content Excluding the Wrapping Tag from an Element Using JSoup

How can I take the text 'Some random text' and enclose it within a span tag? For example, if I have the following element: <div> Some random text 1 <a href="some_url">Go to Link</a> </div> <div> <spa ...

javahtmljsoup

Troubleshooting the non-responsive behavior of Bootstrap's hidden-sm-down

Why are the two images within the <div> with hidden-sm-down still visible on my laptop when I resize the page? I need them to be hidden on small devices for a different menu layout. <div class="row"> <div class="col-m ...

htmlcsstwitter-bootstrap

How can we ensure that the borders of a text field automatically adjust to fit the dimensions of the text field using CSS?

I've encountered an issue with the borders of text fields while working on a project involving CSS/HTML. The problem is that in the browser, the borders appear shorter than the text fields. Initially, I attempted to adjust the border size to match th ...

htmlcss

Execute a PHP script upon button click without the need to refresh the page

I'm facing an issue with integrating PHP and JavaScript. Objective: To execute a .php script when the event listener of the HTML button in the .js file is triggered without causing the page to reload. Expected outcome: On clicking the button, the PH ...

javascriptphphtmljquery

The functionality of ng-style is not compatible with min, and utilizing ng-model produces undesirable results

Why does the ng-style condition not work with min=0 if the saved value of ng-model="detail.Amount" is negative? <input type="number" min="0" oninput="validity.valid||(value='');" class="form-control" title="Amount" ng-model="detail.Amount" ng ...

htmlangularjsvalidation

Looking for guidance on sending data from a JS file to HTML using Nodejs? Seeking advice on various modules to achieve this task effectively? Let's

Looking for advice on the most effective method to transfer data from a JS file (retrieved from an sqlite db) to an HTML file in order to showcase it in a searchable table. My platform of choice is NodeJS. As a beginner, I am willing to put in extra time a ...

javascripthtmlnode.jssqliteexpress

SVG's height attribute not adjusting properly

I am currently working on implementing an SVG sprite sheet using the "symbol" method outlined here. My HTML code is quite straightforward. <svg><use xlink:href="/images/iconSprite.svg#camera"/></svg> Below is a sample symbol extracted ...

csssvgaspect-ratio

Why does box-shadow only display on the bottom border and not the right and bottom border?

I want to add a shadow effect on the bottom and right sides of a specific div. #navigation-and-slideshow { overflow: hidden; background-color: #fff; padding: 10px 1%; box-shadow: 2px 2px 5px #222; } However, I am only seeing the shadow ef ...

css

Is there still excess top padding or margin in Firefox after clearing the default reset for the <ul> element?

My floated horizontal list is looking great on IE and Opera, but for some reason, Firefox is adding extra padding or margin at the top. I'm not sure how to fix it. Everything was fine until I had to add a display:inline to an image link next to it to ...

csshtml-listscss-float

Tips for avoiding Navbar dropdowns covering other content

Using bootstrap 4 for a project and experiencing an issue with the navbar overlapping the content. How do I make the remaining content adjust when toggling the dropdown menu? To address this problem, I have applied a 50px margin to the body element. The ...

htmlcssbootstrap-4navbar

Ways to manipulate a div tag with CSS even when it lacks a class or ID attribute

Hey there! I've got this snippet of HTML code that I'm working with: <div class="template-page-wrapper"> <div class="templemo-content-wrapper"> <div class="templatemo-content"> <div c ...

htmlcss

How can I customize the styling of an SVG pseudo element using Font Awesome 5?

I've implemented font awesome 5 pseudo elements to attach an :after tag to my element as shown below: &:after { content: "\f068"; font-weight:400; color:$brandRed; float:right; font-family: "Font Awesome 5 Pro"; } The c ...

javascriptcssfont-awesomepseudo-elementfont-awesome-5

Styling the right button of the split button in jQuery Mobile version 1.4.0 using CSS

I was attempting to create a listview with list items that have a button on the right side, much like a jQuery Mobile split button listview. However, I only want the right button to be clickable. The left part of each item should contain a label along with ...

jquerycssjquery-mobilecustomization

Tips for converting multiple arrays of objects into a single array set

Here is an example of an array: $scope.array1=[[Name:'Madhu'],[Name:'Vijay'],[Name:'Srinu']] I need to convert this array into a different format. I want to pass this array in the columns option of a dx datagrid. So the desi ...

htmlangularjs

Send information using AJAX within a .NET integrated browser

In our current setup, we utilize a .NET embedded browser to showcase an HTML page that is generated by applying an XSLT file to an XML file using .NET. This process results in HTML content displayed within the embedded browser through the DocumentText prop ...

javascriptjqueryhtml.netajax

Utilizing Selenium for automating button clicks

When attempting to click a button represented by the following HTML code: <a href="javascript:submitPage('V','All Notes','');" class="viewFilter">All Notes</a> I have made multiple attempts to ...

pythonhtmlselenium

Trigger a JavaScript event when attempting to input the maximum number of characters

I am currently facing a challenge with implementing a tooltip on a text area that has a maximum character limit of 500. The tooltip should only appear when the user reaches the maximum character count and attempts to input more characters. My previous appr ...

jqueryhtmlbootstrap-4

Using HTML and JavaScript to implement a dragging functionality on a canvas element

After creating a square grid using HTML canvas, I've added a drag feature that allows users to draw rectangles by dragging over the grid. However, it seems that non-rectangle shapes can also be drawn in certain cases. Let's delve into an additio ...

javascripthtmlwebdragbootstrap-5