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

Is there a way to adjust the size of a video thumbnail to fit within a

Currently, I am developing a system to remotely control home electrical devices via the web. However, I am facing an issue with fitting camera images properly within their container. How can I ensure that the video thumbnail fits perfectly in the designat ...

htmlcssreactjs

Updating the innerHTML of a frameset

I have a unique challenge that involves loading the frameset of www.example.com/2.html when accessing www.example.com/en/test/page.html. Successfully accomplished this task. Now, after loading 2.html in the frameset, I want to modify ".html" to ".html" t ...

javascriptjqueryhtmlcss

In order to activate the VScode Tailwind CSS Intellisense plugin, I have discovered that I need to insert a space before

I recently followed the installation guide for using Tailwind with Next.js Here is a snippet from my tailwind.config.js file: /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./app/**/*.{js,ts,jsx,tsx}", ...

cssreactjsvisual-studio-codenext.jstailwind-css

Problem with transitions not working properly in Vue.js.The issue

Experiencing an issue with the Vue.js transition feature. Check out this link for reference. When the transition enters, it works smoothly, but when transitioning out, it's not functioning properly. File: genetic.vue <transition name="slide-f ...

cssvue.jstransition

Achieve video lazy loading in JavaScript or jQuery without relying on any external plugins

I've been experimenting with lazy loading videos using jQuery. While I've had success with lazy loading images and background-images using the same technique, I ran into issues when trying to apply it to videos. Here's what I've tried s ...

javascriptjqueryhtmlcsslazy-loading

How can you align a div next to another using the float property in CSS?

/*Custom Styling for Divs*/ #box1 { border: 1px solid; border-radius: 25px; width: 900px; } #box2 { border: 1px solid; border-radius: 25px; width: 430px; } #box3 { float: right; border: 1px solid; border-radius: ...

htmlcss

How can we create lists using parentheses specifically with Javascript or jQuery?

I am looking to create a formatted list using <ol> and <ul> tags with parentheses included. (1) List1 (2) List2 (3) List3 (4) List4 The challenge is to achieve this formatting purely with javascript or jQuery, without relying on any external ...

javascriptjqueryhtmlcss

The website does not display properly on larger screens, while showing a scrollbar on smaller screens

I'm encountering an issue with my website where I can't seem to find a solution no matter what I try. My goal is to ensure that my website looks consistent across all computer screen sizes. However, when viewed on larger screens, there's a ...

htmlcss

Does applying a style to an element that already has the same value result in a decrease in performance? Alternatively, do all browsers simply overlook it?

Assuming I have an element with the style top: 5px, and then I execute element.style.top = "5px";, will the browser readjust its position and trigger a layout again? Or does it recognize that there is no need to change anything? (Is this behavior specified ...

javascriptjquerycsshtml

"Scrolling with Bootstrap Scroll Spy is causing incorrect sections to be

Can anyone help me with my issue regarding Bootstrap scrollspy settings? It seems to be highlighting the wrong div id, always the last one. Here is the code snippet: Content: <body style="heigt: 100%" data-spy="scroll" data-target="#side-menu"> ...

javascriptjquerycsstwitter-bootstrap

Using JQuery to switch out images that do not have an ID or class assigned

Currently, I am using a Google Chrome Extension to apply an external theme to a website. Unfortunately, the logo on the site does not have an ID or class that can be used to call it. I am searching for a solution to replace it with a different image. My ...

javascriptjquerycssgoogle-chrome-extension

When you include ng-href in a button using AngularJS, it causes a shift in the alignment of the text within the button

Recently, I've been delving into Angularjs with angular-material and encountered a slight issue with ng-href. I created a Toolbar at the top of my webpage, but the moment I include the "ng-href" attribute to a button, the text inside the Button loses ...

javascripthtmlcssangularjs

Tips for ensuring your background image is fully displayed and covers the entire size

My dilemma lies within the header div. My intention is to have it fully covered with a background image without any cropping. However, the current setup seems to be stretching and cutting off parts of the image. Here is my CSS code: .header { bor ...

htmlcssbackground-imagecontaincover

Creating a scrolling list group in a single column that moves in sync with another longer column

When working with two columns in Bootstrap, such as col-4 and col-8, how can you ensure that a list-group stays fixed within its column and vertically aligned even when the content in the other column is scrolled down? Dealing with this responsively can b ...

htmlcsstwitter-bootstrapbootstrap-5

Is it possible to prevent website backgrounds from duplicating?

When I visit my website and zoom in using CTRL +, the background image starts duplicating instead of just resizing. Other solutions I've found only stretch the image, which is not what I want. My website has a comments section that can make the length ...

htmlcss

Ways to perfectly position a bootstrap well in the center

https://i.sstatic.net/b3g46.pnghttps://i.sstatic.net/osPzb.png Having trouble aligning this image with the center of the page. It should be a straightforward task, but for some reason, I can't seem to get it right. ...

csstwitter-bootstrap

What happens to the content in a browser when the window is minimized?

The appearance of my application is enhanced when the browser window is maximized to its full extent, causing the content to be collapsed upon minimizing the browser window. I prefer the content not to collapse. I have utilized a div that resembles a text ...

jqueryhtmlcssbrowseruser-interface

Prevent floating labels from reverting to their initial position

Issue with Form Labels I am currently in the process of creating a login form that utilizes labels as placeholders. The reason for this choice is because the labels will need to be translated and our JavaScript cannot target the placeholder text or our de ...

javascriptjqueryhtmlcss

Unleashing the Power of Resetting CSS Class Attributes in Twitter Bootstrap

Last year, @Andres Ilich shared a remarkably elegant solution for centering the navigation bar in Bootstrap. Here is an excerpt from the answer he posted: Visit here for more details. <div class="navbar navbar-fixed-top center"> <div class=" ...

javascriptjquerycsstwitter-bootstrap

A gap only appears in the drop-down navigation when the page is scrolled

After finally completing my first website, I encountered a frustrating issue. When scrolling down the page, a gap appears in the navigation bar, making it impossible to access the dropdown menus. I've been struggling to fix this problem on my own. Any ...

htmlcssnav