3D Navbar That Rotates

3d Navbar That Rotates

First of all, thank you to all that commented and answered to this question, especially Josh!

Josh, your example works perfectly for browsers that support preserve-3d. The update you posted without preserve-3d appears flat on IE so it was still not perfected for all browsers.

After three days of headaches, I realized the problem. The origin of the sides was not being set correctly. The sides need to rotate around a point that is half way in on the Z axis.

Once I've updated the origin to :

transform-origin: 25px 25px -25px;

Once this was correct, all you really need to do is update the rotation of the object. No need to use any transformation of the X,Y,Z coordinates.

Here's the fiddle and the solution for a 3D Navigation bar that rotates and works for all browsers including IE10+.

http://jsfiddle.net/tx0emcxe/

3D Nav CSS3 Rotate Transform Not Working

Mouseenter event on second(.bottom) li is not triggering because front UL overlapping it you need to change HTML structure. check out this fiddle:

<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>

https://jsfiddle.net/ashish1bhagat/LshqLfo2/4/

How to make a properly looking 3D 2-sided rotating cube-like effect?

I found THIS on codpen and modified it a bit take a look at it and see if you can apply it on your code

var cube = document.querySelector('.cube');var currentClass = '';var side = "front";
function changeSide() {  side = side == "front" ? "top" : "front";  var showClass = 'show-' + side;  if (currentClass) {    cube.classList.remove(currentClass);  }  cube.classList.add(showClass);  currentClass = showClass;}

* {  box-sizing: border-box;}
body {  font-family: sans-serif;}
.scene {  width: 200px;  height: 200px;  border: 1px solid #CCC;  margin: 80px;  perspective: 400px;}
.cube {  width: 200px;  height: 200px;  position: relative;  transform-style: preserve-3d;  transform: translateZ(-100px);  transition: transform 1s;}
.cube.show-front {  transform: translateZ(-100px) rotateY( 0deg);}
.cube.show-top {  transform: translateZ(-100px) rotateX( -90deg);}
.cube__face {  position: absolute;  width: 200px;  height: 200px;  border: 2px solid black;  line-height: 200px;  font-size: 40px;  font-weight: bold;  color: white;  text-align: center;}
.cube__face--front {  background-color: red;}
.cube__face--top {  background-color: blue;}
.cube__face--front {  transform: rotateY( 0deg) translateZ(100px);}
.cube__face--top {  transform: rotateX( 90deg) translateZ(100px);}
label {  margin-right: 10px;}

<div class="scene">  <div class="cube"  onmouseover="changeSide()">    <div class="cube__face cube__face--front">front</div>    <div class="cube__face cube__face--top">top</div>  </div></div>

Shifting a css 3d animation so it is right (instead of left) aligned

I changed the width on this class:

.bk-list li .bk-book {
  position: absolute;
  width: 18vw; // changed this style
  height: 18vw;
  -webkit-transform-style:

to 18vw and the spine moved into place: codepen

Rotate interactively a 3D plot in python - matplotlib - Jupyter Notebook

Ok I found the answer on another post:

How can I open the interactive Matplotlib window in IPython notebook?.

the following line %matplotlib qt has to be written at the beginning of the script + you have to restart the jupyter notebook and it works

Many thanks for your help guys!

Active navbar with css animation

There is no class called after,

Change this:

nav ul li:active {
  transform: translateX(-70px);
}

nav ul li:active:after {
  opacity: 1;
  transform: perspective(400px) rotateY(0deg) scale(1);
}

to This:

.active {
  transform: translateX(-70px);
}

.active:after {
  opacity: 1;
  transform: perspective(400px) rotateY(0deg) scale(1);
}

The jQuery part is a little tricky, you were trying to change the class of a, but the element needed the change is the li, so I added .parent() to the code.

So, change JS from this:

$(document).on("scroll", onScroll);

  //active navigation

  function onScroll(event) {
    var scrollPos = $(document).scrollTop();
    $('nav a').each(function() {
      var currLink = $(this);
      var refElement = $(currLink.attr("href"));
      if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
        $('nav ul li').removeClass("after");
        currLink.addClass("after");
      } else {
        currLink.removeClass("after");
      }
    });
  }

to this:

$(window).on("scroll", function() {
    var scrollPos = $(document).scrollTop();
    $('nav a').each(function() {
      var currLink = $(this);
      var refElement = $(currLink.attr("href"));
      if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
        $('nav ul li').removeClass("active");
        currLink.parent().addClass("active");
      } else {
        currLink.parent().removeClass("active");
      }
    });
  })

---

Related Topics