Spinning collection of CSS objects in 3D motion around the center of the group

In my CSS file, I created 3 small cubes and aligned them in a row within the div #first_line_of_cubes at the bottom. You can view it here. (Please note that this may only work in Chrome due to prefix issues)

Now, I am trying to rotate the line #first_line_of_cubes using:

-webkit-transform:rotateY() rotate(x)

The challenge is that it rotates around the left-hand side corner of the grouped cubes instead of the center like I want.

I have researched and found that the -webkit-transform-origin property should solve this issue, but I haven't been successful with any values I've tried. What could be causing this problem and how can I achieve a rotation around the center of the grouped cubes?

If there is no CSS solution, I am open to JavaScript/jQuery alternatives as well.

cssrotationcenter

Answer №1

When using Chrome version 27, I found that setting the origin works well for me. However, it appears that the center is not exactly where I anticipated:

http://jsfiddle.net/MRpUb/

-webkit-transform-origin:300px 0px 0px;

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

The functionality to clear the input search text upon clicking is malfunctioning

Why isn't this basic script working as expected? It has worked fine in the past, but now it's not functioning properly. <form name="form1"> <input type="search" placeholder="Search..." required="required" onfocus="if(this.value == &ap ...

javascriptcsshtml

I want to use flexbox to center three divs on my webpage

I am trying to align 3 divs inside a flex container in the center of the page with equal distance between them and also from the edge of the page. .container { display : flex; width : 60%; } .para { width : 33%; padding : 1em; borde ...

htmlcssflexbox

Sustaining the hover effect background color when hovering over submenu options

I am currently working on a navigation menu that includes list items a, b, c, d, e, f. One issue I am facing is when a user hovers over the list item d, the submenu items like d1, d2, d3, d4, and d5 appear within the d section. However, the background col ...

htmlcsstwitter-bootstrap

What is the option for receiving automatic suggestions while formatting components in a react.js file?

When styling elements in our app using app.css or styles.css, VS Code provides auto-suggestions. For example, if we type just "back" for background color, it will suggest completions. However, this feature does not work in react.js or index.js. Why is that ...

javascripthtmlcssreactjs

Aligning a div vertically with two text areas inside

I am having difficulties with vertically centering my div, which is currently acting as a container for two text areas. The two text areas are positioned side by side as I want them, but I would like them to be vertically centered on the screen while maint ...

cssreactjs

Customize arrow direction in AntDVue ant-collapse using simple CSS styling

Is there a way to customize the arrow directions in ant-collapse vue? I recently faced an issue where I couldn't change the arrow directions without using !important (which I try to avoid). Fortunately, we found a workaround for this problem at my wo ...

csssassvuejs2nuxt.jsantd

Is it possible to assign a predetermined text content to a table cell using a CSS class?

I attempted the following: <style type="text/css"> td.orange : before { background: #DD5F15; content : "TRIPLE";} </style> However, it seems that the content is being added after the closing "td" tag, which is causing it not to display. E ...

htmlcsshtml-table

What is causing the top and bottom margins to be invisible in my browser?

Why can't I see the top and bottom margins in Safari, Chrome, or Firefox when I've set the margin to 50px? HTML: <div style="width:400px;background-color:#ffffaa"> <p style="background-color:#aaffff; padding:20px; ...

htmlcss

What’s the best way to format a list item so that it displays images without any spacing between them?

I'm currently working on styling a group of images that are within an unordered list in order to achieve the following: The <ul> should take up the entire width of its parent element Each <li> should occupy 25% of the width of the <ul ...

csshtml-lists

AJAX loading footer content before images are fully loaded

I am a beginner when it comes to ajax and I'm facing an issue where the footer loads before the images, causing the images to overlap the footer. The problem is illustrated in the image below. <!doctype html> <html lang="en"> <head ...

javascripthtmljquerycssajax

What causes a div element to not be 100% width when all its predecessors are already set to 100

Why are the divs not expanding with content even though everything is set to 100% and how can this issue be resolved? html, body { height: 100%; } body { margin: 0; padding: 0; } /* both of these are constrained to 100vh */ #root { height: 100 ...

htmlcss

The floating label appears distorted when used with a datalist input in Bootstrap 5

How can I get the floating label to display correctly for datalists in Bootstrap 5? Currently, it looks like this... It's working fine without the form-floating class, but I want to use the floating form feature. <div class="form-floating" ...

htmlcssfrontendbootstrap-5web-frontend

Position the read more buttons in JavaScript at the bottom of the div

I designed three boxes in this section with content inside. To enhance the functionality, I added a feature that made the boxes smaller. Everything was functioning perfectly, but I encountered an issue with the alignment of the buttons at the bottom. Is th ...

javascripthtmljquerycss

Adjusting the height of a div based on the height of the window

Here is the HTML structure I am working with: <body> <div class="header">header</div> <div class="content"> hello </div> <div class="footer">footer</div> </body> This is the current ...

htmlcssposition

Using JQuery and/or Selenium/WebDriver to ascertain the visible color of elements on a webpage

Is there a way to accurately determine the visible color of page elements? When using JQuery, I can retrieve the background-color of an element with the following code: $('#foo').css('background-color'); However, the background-color ...

jqueryhtmlcsscolorsselenium-webdriver

The ellipsis styling is being ignored

Check out the code provided below. It pertains to the text box located in the top right corner, which reveals a drop-down box when clicked. My intention is for long text in this box to be truncated with ellipsis using text-overflow:ellipsis. From my unders ...

htmlcsstwitter-bootstrapbootstrap-4

The vertical navigation sub-menu is designed to overlap the div container for a

I'm having an issue with my sidepanel vertical navigation where sub-menus are not being displayed properly due to a div container. The width of the div container [side-panel-links] is causing the sub-menus and children of the sub-menus to be cut off. ...

jqueryhtmlcss

What causes the background-color:attribute to malfunction when there are comments in the preceding line?

Recently, while testing internal stylesheets in the latest version of Chrome, I encountered a peculiar bug that caused my code to break. Strangely enough, any comments placed before background-color:rgb(51,51,51) seemed to trigger the failure of the code. ...

htmlcssstylescomments

``When the screen size is reduced, the Bootstrap columns will resize and appear next to

Struggling to create a responsive web design similar to: https://i.sstatic.net/scRyw.png When resizing, I want the skills section to appear side by side under the introduction: https://i.sstatic.net/SLzsx.png The issue lies with the layout of the introdu ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a missing clear button for the search input type in Firefox?

<input type="search" /> input[type="search"] { -webkit-appearance: searchfield } Is there a way to display the clear(x) button in Firefox when something is typed into the input field? Any insights would be greatly appreciated! ...

csshtmlfirefox