Unable to rotate 3D cube

Struggling with getting my cube to rotate properly while coding. Anyone able to assist? I've exhausted all options. See my code here:

Link to Codepen

@keyframes spin {
 from {
 transform: rotateY(0deg);
}
 to {
 transform: rotateY(360deg);
}
}
 body .cube {
 overflow: visible;
 perspective: 800px;
 perspective-origin: 100px 100px;
 margin-top: 50px;
 margin-left: 200px;
 position: relative;
 animation: spin 10s linear infinite;
 transform-origin: 150px 150px;
 transform-style: preserve-3d;
 transform-box: fill-box;
}
 body .cube h1 {
 text-align: center;
 transform: translateY(350%);
}
 body .cube .frontside {
 width: 300px;
 height: 300px;
 position: absolute;
 margin: 0;
 opacity: 0.5;
 background-color: green;
 transform: translateZ(150px);
}
 body .cube .backside {
 width: 300px;
 height: 300px;
 position: absolute;
 margin: 0;
 opacity: 0.5;
 background-color: black;
 transform: translateZ(-150px);
}
 body .cube .leftside {
 width: 300px;
 height: 300px;
 position: absolute;
 margin: 0;
 opacity: 0.5;
 background: purple;
 transform: translateX(-150px) rotateY(90deg);
}
 body .cube .rightside {
 width: 300px;
 height: 300px;
 position: absolute;
 margin: 0;
 opacity: 0.5;
 background-color: midnightblue;
 transform: translateX(150px) rotateY(90deg);
}
 body .cube .topside {
 width: 300px;
 height: 300px;
 position: absolute;
 margin: 0;
 opacity: 0.5;
 background-color: yellow;
 transform: translateY(-150px) rotateX(90deg);
}
 body .cube .bottomside {
 width: 300px;
 height: 300px;
 position: absolute;
 margin: 0;
 opacity: 0.5;
 background: red;
 transform: translateY(150px) rotateX(90deg);
}
 
<div class="cube">
    <div class="frontside"><h1>Hello1</h1></div>
    <div class="backside"><h1>Hello2</h1></div>
    <div class="leftside"><h1>Hello3</h1></div>
    <div class="rightside"><h1>Hello4</h1></div>
    <div class="topside"><h1>Hello5</h1></div>
    <div class="bottomside"><h1>Hello6</h1></div>
</div>

htmlcss

Answer №1

In case this isn't what you are looking for, feel free to adjust the question

@keyframes spin {
 from {
 transform: rotateY(0deg);
}
 to {
 transform: rotateY(360deg);
}
}
 body .cube {
    overflow: visible;
    perspective-origin: 100px 100px;
    margin-top: 50px;
    margin-left: 200px;
    position: relative;
    transform-origin: 150px 150px;
    transform-style: preserve-3d;
    transform-box: fill-box;
    height: 200px;
    width: 200px;
    -webkit-animation: spin 15s infinite linear;
}




 body .cube h1 {
 text-align: center;
 transform: translateY(350%);
}
 body .cube .frontside {
 width: 300px;
 height: 300px;
 position: absolute;
 margin: 0;
 opacity: 0.5;
 background-color: green;
 transform: translateZ(150px);
}
 body .cube .backside {
 width: 300px;
 height: 300px;
 position: absolute;
 margin: 0;
 opacity: 0.5;
 background-color: black;
 transform: translateZ(-150px);
}
 body .cube .leftside {
 width: 300px;
 height: 300px;
 position: absolute;
 margin: 0;
 opacity: 0.5;
 background: purple;
 transform: translateX(-150px) rotateY(90deg);
}
 body .cube .rightside {
 width: 300px;
 height: 300px;
 position: absolute;
 margin: 0;
 opacity: 0.5;
 background-color: midnightblue;
 transform: translateX(150px) rotateY(90deg);
}
 body .cube .topside {
 width: 300px;
 height: 300px;
 position: absolute;
 margin: 0;
 opacity: 0.5;
 background-color: yellow;
 transform: translateY(-150px) rotateX(90deg);
}
 body .cube .bottomside {
 width: 300px;
 height: 300px;
 position: absolute;
 margin: 0;
 opacity: 0.5;
 background: red;
 transform: translateY(150px) rotateX(90deg);
}
 
<!DOCTYPE html>
<html>

  <head>
<link rel="stylesheet" href="1.css">
    <script type="text/javascript"></script>
  </head>



<body>
<div class="cube">
    <div class="frontside"><h1>Hi there1</h1></div>
    <div class="backside"><h1>Hi there2</h1></div>
    <div class="leftside"><h1>Hi there3</h1></div>
    <div class="rightside"><h1>Hi there4</h1></div>
    <div class="topside"><h1>Hi there5</h1></div>
    <div class="bottomside"><h1>Hi there6</h1></div>
</div>
</body>
</html>

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

PyQt TreeView scrollbar obstructing the header

I've been experimenting with the QTreeView widget (instead of QListView) in order to have a horizontal header. Additionally, I wanted to use stylesheets to customize the colors and appearance of the header and scrollbars. However, there is an issue w ...

pythoncsspyqt

Executing Controller method from an HTML webpage

I have designed a webpage in Html called SomePage.Html, and I am looking to trigger a method every time someone visits this page. Let's say I have a Controller named DefaultController with a method called - Get() and I want this method to be executed ...

c#htmlasp.net.netasp.net-web-api

Guide to creating a nested list using the jQuery :header selector

Here is the structure of my html: <h1 id="header1">H1</h1> <p>Lorem ipsum</p> <h2 id="header2">H2</h2> <p>lorem ipsum</p> <h2 id="header3">H2</h2> <p>lorem upsum</p ...

javascriptjqueryhtmlcssnested

JSFiddle Functioning Properly, But Documents Are Not Loading

My JSFiddle is functioning properly, but the files on my computer aren't. It seems like there might be an issue with how they are linking up or something that I may have overlooked. I've checked the console for errors, but nothing is popping up. ...

javascriptjqueryhtmlcss

chart for visualizing two rows with matching IDs and dates

I have been attempting to accomplish the following two scenarios: 1) When both ID and dates are the same in the chart, but the descriptions differ, I want to display them on separate lines. 2) If there is not enough room to show the row label, I would li ...

javascripthtmlangularjscharts

The width of the HTML page seems to adjust or shift when I click on

I'm encountering an issue with my navbar. Whenever I open the dropdown menu, the width of my page changes but returns to normal when it is closed. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="styl ...

htmlcsstwitter-bootstrapbootstrap-4

Personalized scroll bar within a Chrome application

I'm currently working on customizing the scrollbar for my Chrome App using CSS and I have encountered an issue with rule #2: section { overflow: auto } section::-webkit-scrollbar { width: 5px ; } Oddly enough, when I apply the second rule, Chrom ...

cssgoogle-chromescrollbargoogle-chrome-appblink

Guide to removing text color from a background with css or javascript

Is there a way to achieve the effect shown in this image on my HTML page: http://prntscr.com/b912c0? I've attempted using mix-blending modes, but haven't been successful in recreating the desired result. Any tips or tricks for accomplishing this ...

jqueryhtmlcss

Determining the post_thumbnail's dimensions by force

How can I maintain a constant image size for post thumbnails on my website, regardless of the original image's dimensions? I attempted to achieve this using the following code: <?php if (has_post_thumbnail()) the_post_thumbnail(array(400, 200)); ...

phphtmlcsswordpress

Blazor: Passing a CSS class as a parameter to a child component

Is there a way to ensure css isolation works properly when passing a class as an argument to a child component? In the following code snippet, I anticipated the child component would display in blue, but that's not happening. Parent.razor <div cla ...

cssblazor-webassembly

Customize your click event with conditional styling in React

When the onClick event is triggered, I am attempting to modify a class by calling my function. It appears that the function is successfully executed, however, the class does not update in the render output. Below is the code snippet: import React from &ap ...

javascriptcssreactjs

Image is overlaid by Dropdown Menu

Today I had a strange encounter on my website LiveGreen Whenever I hover over the Menu Services, the dropdown menu goes under the image section below it. I've tried every possible solution like adjusting positioning and z-index, and searched extensiv ...

htmlcss

Finding the nth-level children using JQuery

Is there a way to select nth-level children in CSS/jQuery without using any ID or class references, only tag names? I know how to get first level children with the selector div#block > div. But I am looking for a solution to target deeper levels. & ...

jqueryhtmlcssjquery-selectors

Creating unique styles with styled components without the use of selectors

Is it possible to achieve contextual styling without using CSS selectors? For example: <Button primary> <Text>BUTTON</Text> // if the button is primary then have 20px padding else 0 <Icon/> // if the button is primary then ...

cssreactjsreact-nativestyled-components

Switch between dark and light themes on the Tradingview widget

I have integrated a TradingView widget into my website and I am working on adding a dark/light mode switch to the site. I would like the widget color to change along with the background in the switch. See Widget Screenshot TradingView Widget - Widget sour ...

javascriptcsswidget

Introducing the innovative Icon Collapsable JQuery - a versatile tool that

I'm looking to set custom icons for the JQuery Collapsable view without having to make changes to the default JQuery CSS and .JS files. You can take a look at my starting point on jsFiddle here: http://jsfiddle.net/jakechasan/M7LLU/ Although I' ...

javascriptjqueryhtmlcss

Struggling to align block elements correctly after changing them to inline

I've been trying to align this paragraph while keeping the navigation menu and logo in their correct positions. I attempted to make everything inline, but that didn't work. Then I experimented with the float property, which only made things worse ...

csshtmlhyperlink

When attempting to specify the path in the angular.json file, Angular encounters difficulty accessing Bootstrap from the node_modules directory

I have been attempting to integrate Bootstrap into my Angular project. Firstly, I used npm install --save bootstrap to add Bootstrap to my project. Following that, I installed jQuery as well. I then specified the path for Bootstrap. Displayed below is an ...

cssangulartypescriptnpmangular-bootstrap

unable to format radio button list

Having trouble aligning the radiobutton list to the left of the label above. Here is the code snippet: <div style="border-radius: 10px;"> <div style="margin-bottom: 10px"></div> <asp:Panel ID="panel" runat="server"&g ...

htmlcssasp.netradiobuttonlist

List arranged in order with a hyperlink in the center and an image positioned on the right side

I am trying to create an ordered list with a link to an article in the middle and a small png image file positioned directly to the right of it. For reference, here is an image depicting the exact type of list that I am aiming to achieve: https://i.stack. ...

htmlcss