Troubleshooting: Why Isn't My 3D Navigation CSS3 Rotate Transform

I am currently facing an issue while creating a 3D navigation bar. One of my CSS rules is not functioning as expected, despite having similar precedence to another rule that is working properly.

The problematic rule is:

#main-navbar.hover-home .bottom li:nth-child(1) {
     transform: rotateX(0deg) translateZ(25px);
}

You can view a demonstration of this issue on this fiddle.

In the updated fiddle with the transition effect included, you will notice that the .front li:nth-child(1) rotates correctly, whereas the .bottom li:nth-child(1) does not move.

These are the classes responsible for the rotation:

//working
#main-navbar.hover-home .front li:nth-child(1) {
  transform: rotateX(90deg) translateZ(25px);
}
//not working
#main-navbar.hover-home .bottom li:nth-child(1) {
  transform: rotateX(0deg) translateZ(25px);
}

I am trying to achieve simultaneous rotation for both the .front and .bottom sections of the navigation bar.

jqueryhtmlcss

Answer №1

The mouseenter event on the second list item with class "bottom" is not triggering due to overlap from the front UL. To fix this, consider changing the HTML structure. Take a look at this fiddle for reference:

<nav id="main-navbar">        
      <ul class="list-inline">
        <li><a href="#">
            <span class="front">Home</span>
            <span class="bottom">Home</span></a>
          </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>        
  </nav>

For more details, visit this link: https://jsfiddle.net/ashish1bhagat/LshqLfo2/4/

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 showcasing a SQL INNER JOIN in HTML using Flask

I'm struggling with displaying a value from another table, and it would be easier to comprehend with the code provided below: contact.py def index(): db = get_db() contacts = db.execute( 'SELECT *' ' FROM conta ...

pythonhtmlsqlflask

The most recent update of Blink does not support the complex selector :nth-child(2):nth-last-child(2){}

There is an unusual issue: after a recent update, the selector .groups .group:nth-child(2):nth-last-child(2){} suddenly stopped working. However, it still works perfectly in Webkit and Gecko browsers. Any thoughts on how to resolve this? Snippet of HTML ...

csswebkitcss-selectorsblink

Editing DOM elements within Angular JS using Greasemonkey extension

I have been developing a Greasemonkey script to enhance the performance of a vendor's angularJS tool by automating certain processes. One major obstacle I am encountering is that the element I need to interact with is not yet loaded in the DOM when m ...

javascriptjqueryangularjsgreasemonkey

Python Automation: Saving Excel Files with Selenium

I'm on a mission to download an XLS file for each day of a specific month. However, when I use Chrome's developer tools to inspect the download button for the XLS file, it turns out that it's not actually a button at all. So how can I go abo ...

pythonhtmlseleniumweb-scrapingdownload

Discover the child of the delegated event div using jQuery

Can you assist me in resolving this issue? My HTML structure appears as follows: <div id="main-randompart"> <!--Inserted into the DOM during runtime--> <div class="close"> X </div> <img src="somesrc..."> ...

jqueryhtml

Tips for parsing and displaying JQuery response data

After making an Ajax call to a WebMethod, I am receiving a JSON response that I need to parse and display the data in dynamically created div tags. The attributes in bold should be replaced with the corresponding properties from the JSON response. Each new ...

jquery

How can I remove the div container every time the submit button is clicked?

I am currently working on a form that is capturing values as shown below. <form role="form" id="calculate"> <div class="form-group"> <select class="form-control" id="paper"> < ...

javascripthtmlcss

I am trying to utilize a cookie to retrieve the current month, date, and time. Unfortunately, the information is not displaying properly and the date is showing up as

I'm facing an issue with the code snippet below. I keep receiving an undefined error in this specific line of code: `var datemsg = nameOfMonths[date.getMonth()] + " " + date.getDate();`. When I simply use var date = new Date();, the values are succes ...

javascripthtmldatecookiestime

Implementing slideDown() functionality to bootstrap 4 card-body with jQuery: A step-by-step guide

Here is the unique HTML code I created for the card section: <div class="row"> <% products.forEach(function(product){ %> <div class="col-lg-3 col-md-4"> <div class="card mb-4 shadow "> &l ...

javascripthtmljquerynode.jsexpress

The issue of missing } after property list has been encountered while working with Ajax and JS on the select_taf method

Can you help me troubleshoot my JS and AJAX code? I have implemented ajax and JS with select_tag, but I keep encountering issues with the ajax functionality; - @departments = @collocation_request.collocation_request_departments td Reviewer - @de ...

javascriptjqueryruby-on-railsajax

How can we identify if the user is utilizing a text-input control?

Incorporating keyboard shortcuts into my HTML + GWT application is a goal of mine, but I am hesitant about triggering actions when users are typing in a text area or utilizing the keyboard for select menu operations. I am curious if there exists a method ...

javascripthtmlgwtfocus

Using jQuery: How can we manipulate the data returned by sortable('serialize') on a list?

Using jQuery, I have successfully retrieved the positions of a sortable list by using 'serialize' as shown below: var order = $('ul').sortable('serialize'); The variable 'order' now contains this data: id[]=2& ...

jqueryajaxjquery-ui-sortableserialization

The combination of Jquery CSS selectors, plugins, and jqGrid allows for enhanced

I have successfully used multiple plugins that target CSS selectors, but I am facing an issue when trying to apply the same technique to the jqgrid plugin in edit mode. Let me provide some context: In a separate JS file, I have added the following code: ...

jqueryjqgridcss-selectors

Focus on input using jQuery (fixed focus)

How can I ensure that my input always has value and the focus remains fixed on it until values are typed, preventing the cursor from escaping the input field? While I know the existence of the focus() function, how can I effectively utilize it as an event ...

javascriptjqueryhtml

Order of responses in Ajax requests

I have a small question regarding ajax requests If I send multiple AJAX requests, will the responses be received in the same order they were sent? For example, will response for req1 be received before the response for req2? Is there a possibility that ...

jqueryajax

What steps should I take to transition from a table-based layout to a more semantic HTML structure with a CSS-based layout?

Looking at the image presented, a significant portion of the HTML code has been structured semantically, with CSS being utilized for overall aesthetics. However, despite concerted efforts, resorting to a table was necessary to ensure that the segment on th ...

csssemantic-markup

Utilizing jQuery to parse and display JSON information

Looking for assistance with extracting and displaying information from a Yahoo (YQL) feed on a webpage. Any help would be greatly appreciated! Dealing with this is giving me quite the headache haha cbfunc({ "query": { "count": "1", "created": "2010 ...

jqueryjsonyql

What is causing this issue with the basic HTML and CSS code that is preventing it from displaying correctly

What does the HTML code look like? <html> <head> <title>Homepage</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="container"></div> </body> </html> ...

htmlcss

Building custom elements through static compilation

I enjoy using custom elements to efficiently organize the content on a webpage, focusing on semantics rather than getting caught up in the technical details. It seems that in order to utilize custom elements, I have to either depend on JavaScript or use m ...

html

How can I determine the specific quantity of XPATH links with unique identifiers in Selenium?

Seeking automation with Python3 and selenium to streamline searches on a public information site. The process involves entering a person's name, selecting the desired spelling (with or without accents), navigating through a list of lawsuits, and acces ...

pythonhtmlselenium