The z-index remains in limbo until the transition is complete

Exploring the concept of "folding" elements through the use of rotate3d(), I encountered an issue with only one side of my fold. During the animation, the z-index seems to be ignored, but suddenly jumps to the top at the end. My suspicion lies in the z-axis component of rotate3d() (similar to this scenario), yet the puzzling part is why it only affects one of the two elements.

var button = $('.button');
var open = true;

button.click(() => {
  var right = $('.triangle.topright');
  var left = $('.triangle.topleft');

  if (open) {
    right.addClass('r-close');
    left.addClass('l-close');
  } else {
    right.removeClass('r-close');
    left.removeClass('l-close');
  }

  open = !open;
});
.container {
  box-sizing: border-box;
  display: flex;
  padding: 50px 75px;
  position: relative;
  height: 300px;
  width: 100%;
}

.fold.r-close {
  transform-origin: left;
  transform: rotate3d(0, 1, 0, 90deg);
}

.fold {
  box-sizing: border-box;
  display: inline-block;
  height: 100px;
  width: 100px;
  position: relative;
  transition: all 1.5s;
  transform-style: preserve-3d;
}

.fold.outer {
  width: 150px;
}

.fold.left {
  margin-left: 50px;
}

.triangle {
  height: 0;
  position: absolute;
  transition: all 1.5s;
  width: 0;
}

/* middle */
.triangle.middle {
  top: 0;
  z-index: -1 !important;
}

.triangle.middle.left {
  border-bottom: 100px solid pink;
  border-left: 100px solid transparent;
  right: 0;
}

.triangle.middle.right {
  border-bottom: 100px solid pink;
  border-right: 100px solid transparent;
  left: 0;
}

/* right fold */
.triangle.topright.front {
border-bottom: 100px solid red;
border-right: 100px solid transparent;
  backface-visibility: hidden;
  transform: rotate3d(1, 1, 0, 180deg);
}

.triangle.topright.back {
  backface-visibility: hidden;
  border-left: 100px solid transparent;
  border-top: 100px solid pink;
  left: -0.6px;
}

/* left fold */
.triangle.topleft.front {
border-bottom: 100px solid red;
border-left: 100px solid transparent;
  backface-visibility: hidden;
  transform: rotate3d(-1, 1, 0, 180deg);
}

.triangle.topleft.back {
  backface-visibility: hidden;
  border-top: 100px solid pink;
  border-right: 100px solid transparent;
  right: -0.6px;
}

/* folds */
.r-close.back {
  transform: rotate3d(1, 1, 0, 180deg);
}

.triangle.r-close.front {
  transform: rotate3d(1, 1, 0, 0deg);
}

.l-close.back {
  transform: rotate3d(-1, 1, 0, 180deg);
}

.triangle.l-close.front {
  transform: rotate3d(-1, 1, 0, 0deg);
}

.button {
  bottom: 0;
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="fold outer">
    <div class="triangle middle left"></div>
    <div class="fold left">
      <div class="triangle topleft front"></div>
      <div class="triangle topleft back"></div>
    </div>
  </div>
  <div class="fold outer">
    <div class="triangle middle right"></div>
    <div class="fold right">
      <div class="triangle topright front"></div>
      <div class="triangle topright back"></div>
    </div>
  </div>
  <button class="button">Click</button>
</div>

https://jsfiddle.net/jonkani/p5858nso/

Answer №1

This particular behavior is rooted in the logic of the rotation direction. It may be a bit challenging to articulate, but it essentially boils down to how the rotation takes place. Upon closer inspection, you'll notice that the right part rotates upwards (along the Z axis), while the left part rotates downwards. This discrepancy causes the left part to become hidden during the rotation process.

To rectify this issue, the solution lies in reversing the rotation of the left part to align its behavior with the right part. Instead of using 0deg, opting for 360deg will ensure consistency in the rotation movement.

var button = $('.button');
var open = true;

button.click(() => {
  var right = $('.triangle.topright');
  var left = $('.triangle.topleft');

  if (open) {
    right.addClass('r-close');
    left.addClass('l-close');
  } else {
    right.removeClass('r-close');
    left.removeClass('l-close');
  }

  open = !open;
});
.container {
  box-sizing: border-box;
  display: flex;
  padding: 50px;
  position: relative;
  width: 100%;
}

.fold.r-close {
  transform-origin: left;
  transform: rotate3d(0, 1, 0, 90deg);
}

/* Remaining CSS code remains unchanged */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="fold outer">
    <div class="triangle middle left"></div>
    <div class="fold left">
      <div class="triangle topleft front"></div>
      <div class="triangle topleft back"></div>
    </div>
  </div>
  <div class="fold outer">
    <div class="triangle middle right"></div>
    <div class="fold right">
      <div class="triangle topright front"></div>
      <div class="triangle topright back"></div>
    </div>
  </div>
  <button class="button">Click</button>
</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

Send the image link as a parameter

I've been trying to pass an image link through two child components, but I'm having trouble. I added the link to the state and passed it down, but it doesn't work. Strangely, when I manually input the link in the child component, it works pe ...

The Materialize CSS tabs are aligning vertically below each other, but functioning correctly upon refreshing the page

When using materialize css tabs, all the divs load one below the other on the initial page load. If I refresh the page, it starts behaving properly. <div class="row"> <div class="col s12"> <ul class="tabs"> <li class="tab col s ...

Angular renderer's setStyle method does not support the application of linear-gradient

Why won't Angular's renderer2 apply linear-gradient CSS in this code snippet? Can anyone provide insights? export class AppComponent implements OnInit { constructor(private renderer: Renderer2, private elementRef: ElementRef) {} public ngOn ...

Shifting a static-width table within a predetermined width container

Unable to modify the HTML code for this project, I am in need of a CSS-only solution. Dealing with an unpleasant HTML structure that is causing some issues. A side by side comparison on fiddle shows where I'm currently at in the process. The challeng ...

What is the best way to manage the gradual disappearance of multiple divs belonging to the same class using jQuery?

I need help with a hover effect for 6 divs on a page. Each div has a layer on top that fades out on hover and fades back in on mouseleave. I currently have code for each individual div layer, but it's causing a stack overrun. How can I assign this fun ...

Changing the appearance of a radio button dynamically upon clicking

I am currently working on a dynamic pickup date form that utilizes radio buttons. My goal is to change the style of the selected value when a user clicks on it. Below is the code I have tried, but it has not been successful: foreach ($period as $day){ ech ...

What is the most creative way you can think of to create a CSS/JS animated

Is using an animated SVG the best way to create these wavy blobs for mobile compatibility? What approach would you take? Here is a similar example I found var wave = document.createElement("div"); wave.className += " wave"; docFrag.appendChil ...

Styling with CSS to accentuate the currently active tabs

Struggling with writing CSS to meet the following requirements after creating a tab and calling a function on click: 1. The active tab should display a blue underline color. 2. When clicking on a tab, the blue line should appear under the active tab (sim ...

What is the best method to align the three wrappers consecutively?

<div id="container" style="width:900px"> <div id="wrapper1" style="width:200px;float:left"> <img src="./profilepic.jpg" width="190px" height="220px"/> </div> <div id="wrapper2" style="width:400px;float:left"& ...

What are some alternative methods for concealing certain content in my gallery without using java script?

Currently, I am utilizing a JavaScript "show more, hide less" button on my page. However, I am facing an issue where I can't use the same button multiple times on the same page. I tried changing the ID, but it didn't work for me. I suspect I may ...

Failing to verify the presence of specific text within a dropdown menu using Selenium

Previously, I successfully implemented this code, however, the HTML/CSS for the dropdown has since changed and now I am unable to get it to function correctly. Below is the structure for the dropdown code, with specific text highlighted that I am trying t ...

How to Programmatically Assign Bootstrap Class to an Element Using Angular 2

I am working on a page with several input boxes that need to be flagged for certain criteria. <div class="form-group"> <label class="d-block">Allowance Type</label> <div class="input-group"> ...

Having trouble with media queries on my iPad

I currently have a media query set up as follows: @media only screen and (max-width: 959px) It works when I resize my browser, however, it does not seem to be functioning correctly when my iPad is in portrait mode. When I include and (max-device-width: 9 ...

Tips for updating input placeholder text using CSS

Is it possible to change the placeholder text of an input textbox using only CSS? Here's the HTML code snippet: <div class="col"> <input class="form-control" type="text" placeholder="" id="m ...

Is it possible to style a nested ID with CSS?

Imagine a scenario where you are working within an HTML file that you cannot modify, but you have the ability to only edit the CSS through a stylesheet. Is it possible to target an ID within another ID in the same way you can do with classes? #id1 #id2 {s ...

Creating an event listener using a calendar icon

I am looking to create a custom datepicker <input type="text" name="Birth" id="calendarInput" required class="inputField" placeholder="31.12.2001"> <input type="date" name="Birth&qu ...

What is so surprising about how a div moves and changes position?

What causes images and div elements to appear jerky when in motion? <div>*</div> $(function() { var fps = 30; var a = 0; draw = function() { a += 0.001; var x = ((Math.cos(a)+1) /2) *90; var y = ((M ...

During the animation sequence, the element is seen ascending

I'm encountering a small issue with one of the elements I'm animating - it's moving up slightly during the animation process. It elevates about 2-3 pixels while the animation is playing, then snaps back down once it's completed. The el ...

How to Customize the Navbar Position in Bootstrap 3 when the Brand/Logo is Collapsed

I am currently in the process of creating my first website and experimenting with the Bootstrap 3 framework. The navbar I have selected is designed to adjust based on screen size, collapsing into a small button for use on tablets and mobile devices. Howe ...

Uniform widths of table cells when resizing and overflowing

I am working with a table that looks like the one below: +-----+-----+-----+-----+-----+-----+ | | | | | | | +-----+-----+-----+-----+-----+-----+ | | | | | | | +-----+-----+-----+-----+-----+-----+ | | ...