Adjust the translateZ value according to the dynamic height of the element

A unique rotating cube effect has been developed using 3D css transformations. To achieve this, the following transform is applied to a child element:

transform:  translateY(-50%) translateZ(-75px) rotateX(90deg) ;

In addition, the parent element contains the following transformation origin: 

transform-origin: center center -75px;

The complete code can be found here: https://codepen.io/willdelphia/pen/JZOpMJ

Notably, a constant value of "-75px" is used in two instances due to the parent element's height being set at 150px. The challenge is now to achieve the same effect with elements of varying heights, ideally through CSS alone.

The goal is to dynamically calculate half of any given element's height and utilize that value instead of fixed 75px references.

Is it feasible to accomplish this solely through CSS? Would JavaScript intervention be necessary? Are there alternative methods to achieve the desired effect for elements of diverse sizes?

csscss-transforms

Answer №1

When it comes to the child element, simply adjust the style as follows:

transform-origin: center bottom;
transform: translateY(-100%) rotateX(90deg);

By changing the transform origin in this way, all movement now occurs along the Y axis rather than splitting between Y and Z.

For the parent element, the process is a bit more complex. Instead of setting a transform origin, move the element to the center of rotation, rotate it, and then return it to its original position—all while focusing on relative adjustments along the Y-axis (note that only the central rotation changes):

.flipper {
    transform: rotateX(90deg) translateY(-50%) rotateX(0deg) translateY(50%) rotateX(-90deg);

}

.item:hover .flipper {
    transform: rotateX(90deg) translateY(-50%) rotateX(-90deg) translateY(50%) rotateX(-90deg);
}


html, body {
    margin: 10px 0 0 0;
    background: rgb(40, 40, 40);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: 700px;
    margin: auto;
}

.item {
    width: 150px;
    height: 150px;
    margin: 10px;
    perspective: 400px;

}

.flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
    transform: rotateX(90deg) translateY(-50%) rotateX(0deg) translateY(50%) rotateX(-90deg);

}

.item:hover .flipper {
    position: relative;
    transform: rotateX(90deg) translateY(-50%) rotateX(-90deg) translateY(50%) rotateX(-90deg);
}

.cubefront{
    z-index: 2;
    width: 100%;
    height: 100%;
}

.cubetop{
    z-index: 0;

    transform-origin: center bottom;
    transform: translateY(-100%) rotateX(90deg) ;
    
    width: 100%;
    height: 100%;
    color: white;
    background: rgb(62, 62, 62);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cubefront, .cubetop {
    /* backface-visibility: hidden; */
position: absolute;
top: 0;
    left: 0;
    
}

#item1 .cubefront {
    background: rgb(179, 45, 45);
}


#item2 .cubefront {
    background: rgb(179, 103, 45);

}

#item3 .cubefront {
    background: rgb(179, 148, 45);
}

#item4 .cubefront {
    background: rgb(157, 179, 45);
}

#item5 .cubefront {
    background: rgb(74, 179, 45);
}

#item6 .cubefront {
    background: rgb(45, 179, 132);
}

#item7 .cubefront {
    background: rgb(45, 159, 179);
}

#item8 .cubefront {
    background: rgb(45, 99, 179);
}
#item9 .cubefront {
    background: rgb(45, 49, 179);
}
#item10 .cubefront {
    background: rgb(87, 36, 170);
}
#item11 .cubefront {
    background: rgb(137, 36, 170);
}
#item12 .cubefront {
    background: rgb(170, 36, 143);
}
#item13 .cubefront {
    background: rgb(170, 36, 103);
}
#item14 .cubefront {
    background: rgb(170, 36, 36);
}
 <div class="flex">  
        <!-- HTML code for items goes here -->
    </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

Tips for avoiding content appearing beneath overlapping elements

I am facing an issue with a hero image that has an overlapping box. I want to add content below the box but it ends up appearing behind the box. How can I ensure that the content shows below the box while maintaining responsiveness? .shell { display: ...

htmlcssflexbox

Insert between the top navigation bar and the sidebar menu

I am currently in the process of designing my very first website and I have encountered a bit of trouble. I would like to add a page between a navbar and a vertical bar, and I want this page to be displayed when a button on the vertical bar is clicked. You ...

phphtmlcss

aligning content that has exceeded the boundaries

I have a list of dynamically created <a> tags without text, to which I apply background images. These icons are displayed within a <div> container using the float: left; style. As the row of icons becomes too long, it overflows and starts a ne ...

htmlcss

How to horizontally center an element using HTML and CSS

I am encountering an issue while trying to create a navigation bar or header. The problem lies in centering an h1 element. Here is the HTML code I am using: body { margin: 0; padding: 0; } header { display: flex; justify-content: space-between; ...

htmlcssheadernavbar

Utilizing Javascript / jQuery to eliminate specific CSS styles

I am facing an issue with the CSS code for a table positioned at the bottom of the screen. The current code includes a filter specifically for IE 8, but I need to make it compatible with IE 10 as well by removing the filter and adding a background color. ...

javascriptjquerycssinternet-explorer-10css-tables

Altering documents post Bower installation

I took the initiative to manually download the css and js files for an angular module (here). In order to make a small adjustment, I modified the css (specifically changing max-width in the media query): Original: @media only screen and (max-width: 800px ...

htmlcssangularjsbower

Change the color of the border to match the background color

I have a parent container with a unique background color. Inside the parent container, there is an unordered list (ul) with multiple list items (li), each having a distinct color and a brighter border color. Now, I am looking to extract the border color of ...

javascriptjqueryhtmlcss

Adjusting the size of h1 when hovering over an image

Can anyone help me figure out how to increase the width of my h1 tag when hovering over the image? I've been struggling to make it work. http://jsfiddle.net/xJ4dc/ Thank you in advance for any assistance. ...

csshoverwidthimage

What is the best way to divide the height of one div evenly among three other divs?

I have three child divs inside a parent div and I'm looking to distribute the height of the parent div evenly among the three children. Here is the HTML code: <div class="frameright"> <div class="divright"> <t ...

htmlcss

Hover over elements in jQuery to smoothly transition them from one class to another

Is it possible to achieve this? For example: .class1{ background-image:(whatever.jpg) color: #fff; } .class2{ background-image:(whatever2.jpg) color: #999; } Can I create a fade effect for all elements with class1 to class2 when the mouse hover ...

jquerycsseffectsfadeinjquery-effects

Footer remains fixed to the bottom of the page even when there is not enough content to

It seems like there are already many discussions on this topic, so I apologize if this is a duplicate. I searched for it but couldn't find anything similar. I am currently working on an angular application using the Ionic framework for testing purpos ...

htmlcssangularjsionic-framework

Steps to adding a collection of links (stylesheets, javascript files) to each html document

Is it feasible to add a list of links to multiple HTML files? I was inspired by W3 School's W3 Include functionality, which allows you to import blocks of HTML code into various files simultaneously, making it convenient for making changes across many ...

javascripthtmlcss

Font that has been downloaded is not showing up on the HTML document

I recently downloaded a new font and ensured the file location is correct, but for some reason it's not working: <style> @font-face { font-family:"myfont"; src: url('fonts/Helvetica85Heavy_22449.ttf'); } h1 { font-family: ...

htmlcssfonts

Move a sub-division horizontally within a parent element that has a full width of 100%

I am currently incorporating some jQuery features into my website. The concept involves expanding the parent div to 100% width for responsive design as you scroll down the page, which works perfectly. Simultaneously, I aim to translateX the child div so th ...

jquerycssanimation

Overlapping Flexbox elements causing stacking issues

My attempt to create a gallery layout with two larger blocks amidst smaller blocks is not functioning correctly. The large block is overlapping the two smaller blocks below it. Is there a way to prevent block overlapping using CSS? I have searched Stack O ...

cssuser-interfaceflexboxoverlapping

Is it possible for me to adjust these two images to fit the screen perfectly?

Technologies: CSS React JPG/PNG Objective: I am striving to resize two images to achieve this desired look: https://i.stack.imgur.com/B1b0h.png I am currently developing a 'skirt customizer' for either my mom or portfolio, where users can m ...

htmlcssimage

Ways to broaden the map of a variable in SCSS

Currently, I am utilizing a package known as Buefy, which acts as a Vue.js wrapper for the Bulma CSS framework library. Within Buefy's template components, there is an attribute/property called type (e.g., type="is-warning"). According to the document ...

cssvue.jssassbulmabuefy

Update the parent element's class style within a targeted div media query

I am facing a challenge where I want the width of my .container element to be 100% when the screen size reaches 900px. The issue is that I have used .container on multiple pages and only wish to change its appearance within the #sub-top div. The terminolo ...

javascriptjqueryhtmlcss

Dynamic height adjustment for Bootstrap right column

I am struggling to create a layout with a right column using bootstrap. I can't figure out how to achieve the desired arrangement shown in this image. https://i.stack.imgur.com/VaIWD.png I have attempted various methods but the right column does not ...

htmlcsstwitter-bootstrap

Prevent background image animation in CSS

I've encountered an issue with a simple button I created that uses two background images for normal and hover states. Upon testing in various browsers, I noticed that the images animate on hover, causing them to slide up and down. I tried eliminating ...

csscss-transitions