CODEWITHSUNDEEP
css
Bogdan Galan
Bogdan Galan

Reputation: 65

perspective not working on FireFox

On Chrome is working just fine but when I tried on FireFox it wouldn't work.

I have searched the internet and nothing that I found helped me.

I don't know much about transform, animation, transition, etc. so I have tried some modifications and moving the "perspective" around and still nothing.

This the CSS

.uic-wrapper {
  height: 340px;
  width: 300px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  perspective: 500px;
  perspective-origin: 50% -30%;
}
.uic-wrapper:hover .card-middle {
  transform: translate3d(0, 0, -60px);
  opacity: .8;
}

.uic-wrapper:hover .card-back {
  transform: translate3d(0, 0, -120px);
  opacity: .4;
}

He is a full example

$(document).ready(function(){

  "use strict";
  var container = $(".uic-wrapper");
  var nextBtn = $("nav .btn-next");
  var backBtn = $("nav .btn-back");
  var finishBtn = $("nav .btn-finish");

  updateNav();

  function updateNav(){
    var hasAnyRemovedCard = $(".toRight").length ? true : false,
        isCardLast = $(".card-middle").length ? false : true;

    if(hasAnyRemovedCard) {
      backBtn.removeClass('back-btn-hide');

    } else {
      backBtn.addClass('back-btn-hide');
      $(".card-front").addClass('noBack');
    }

    if(isCardLast){
      nextBtn.hide();
      finishBtn.removeClass("hide");
    } else {
      nextBtn.show();
      finishBtn.addClass("hide");
    }
  }

  function showNextCard(){
    //Check if there is only one card left
    if($(".card-middle").length > 0){
      var currentCard = $(".card-front"),
        middleCard = $(".card-middle"),
        backCard = $(".card-back"),
        outCard = $(".card-out").eq(0);

      //Remove the front card
      currentCard.removeClass('card-front').addClass('toRight');
      //change the card places
      middleCard.removeClass('card-middle').addClass('card-front');
      backCard.removeClass('card-back').addClass('card-middle');
      outCard.removeClass('card-out').addClass('card-back');

      updateNav();
    }
  }

  function showPreviousCard(){
    var currentCard = $(".card-front"),
        middleCard = $(".card-middle"),
        backCard = $(".card-back"),
        lastRemovedCard = $(".toRight").slice(-1);

    lastRemovedCard.removeClass('toRight').addClass('card-front');
    currentCard.removeClass('card-front').addClass('card-middle');
    middleCard.removeClass('card-middle').addClass('card-back');
    backCard.removeClass('card-back').addClass('card-out');

    updateNav();
  }

  nextBtn.on('click', function(){
    showNextCard();
  });

  backBtn.on('click', function(){
    showPreviousCard();
  });

});
* {
  box-sizing: border-box;
  outline: none;
}

a {
  color: #1590d0;
}

html, body {
  background: #10a3f1;
  /* fallback for old browsers */
  height: 100%;
  font-family: 'Roboto', sans-serif;
}

a {
  text-decoration: none;
}

h1 {
  color: #6b7d88;
}

.form-group {
  margin-top: 15px;
}

.form-group label {
  color: rgba(0, 0, 0, 0.8);
}

input[type="text"],
input[type="password"] {
  width: 100%;
  display: block;
  padding: 10px;
  border-radius: 8px;
  border: none;
  background-color: #e5eeed;
  margin-top: 5px;
}

.hide {
  display: none;
}

.uic-wrapper {
  height: 340px;
  width: 300px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  perspective: 500px;
  perspective-origin: 50% -30%;
}

.uic-wrapper ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.uic-wrapper ul li {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s;
}

.uic-wrapper ul li .cards-wrapper .card-front {
  position: relative;
  z-index: 3;
  box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.19);
}

.uic-wrapper ul li .cards-wrapper .card-middle {
  z-index: 2;
}

.uic-wrapper ul li .cards-wrapper .card-back {
  z-index: 1;
}

.uic-wrapper ul li .cards-wrapper .card-out {
  z-index: 0;
  opacity: 0;
}

.uic-wrapper nav {
  position: relative;
  z-index: 4;
}

.uic-wrapper nav a {
  color: #ffb902;
}

.uic-wrapper nav .btn-back {
  font-size: 28px;
  position: fixed;
  top: 20px;
  left: 20px;
  transition: all 0.3s ease;
}

.uic-wrapper nav .btn-back:active {
  transform: scale(0.96);
}

.uic-wrapper nav .btn-back.back-btn-hide {
  margin-top: -30px;
  opacity: 0;
}

.uic-wrapper nav .btn-finish,
.uic-wrapper nav .btn-next {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 10px;
  background-color: #66bf65;
  color: white;
  text-align: center;
  border-radius: 0;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.uic-wrapper nav .btn-finish:active,
.uic-wrapper nav .btn-next:active {
  transform: scale(0.96);
}

.uic-wrapper .card {
  background-color: #fff;
  border-radius: 0;
  height: 100%;
  width: 100%;
  padding: 80px 20px 20px 20px;
  transition: all 0.6s cubic-bezier(0.51, 0.02, 0.01, 0.88);
  border-radius: 8px;
}

.uic-wrapper .noBack {
  padding: 20px;
}

.uic-wrapper .toRight {
  transform: translate3d(0, 0, 100px);
  opacity: 0;
}

.uic-wrapper .toLeft {
  transform: none;
  opacity: 1;
}

.uic-wrapper:hover .card-middle {
  transform: translate3d(0, 0, -60px);
  opacity: .8;
}

.uic-wrapper:hover .card-back {
  transform: translate3d(0, 0, -120px);
  opacity: .4;
}

.metaInfo {
  position: fixed;
  bottom: 20px;
  left: 20px;
  color: rgba(255, 255, 255, 0.8);
}

.metaInfo a {
  color: #fff;
  text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
    <div class="uic-wrapper no-touch">
      <ul>
        <li>
          <ul class="cards-wrapper">
            <li class="card card-front active">
              <h1>Signup</h1>

              <div class="form-group">
                <label for="">First Name</label>
                <input type="text" placeholder="First Name">
              </div>

              <div class="form-group">
                <label for="">Last Name</label>
                <input type="text" placeholder="Last Name">
              </div>


            </li>
            <li class="card card-middle">
              <div class="form-group">
                <label for="">Email</label>
                <input type="text" placeholder="Email">
              </div>

              <div class="form-group">
                <label for="">Age</label>
                <input type="text" placeholder="Age">
              </div>
            </li>
            <li class="card card-back">

              <div class="form-group">
                <label for="">Pick a username</label>
                <input type="text" placeholder="Username">
              </div>

              <div class="form-group">
                <label for="">Password</label>
                <input type="password" placeholder="Password">
              </div>

            </li>
            <li class="card card-out">

              <center>
                <i style="font-size:62px;color: #66bf65;" class="fa fa-check"></i>
                <br>
                <h1>All Set!</h1>
              </center>

            </li>
          </ul>

          <nav>
            <ul>
              <li><a class="btn-back" href="#0"><i class="fa fa-arrow-left"></i></a></li>
              <li><a class="btn-next" href="#0">Next <i class="fa fa-arrow-right"></i></a></li>
              <li><a href="#0" class="btn-finish hide">Finish</a></li>
            </ul>
          </nav>

        </li>
      </ul>
    </div>

And a JSFiddle just in case.

Upvotes: 0

Views: 359

Answers (1)

Ajaj Rajguru
Ajaj Rajguru

Reputation: 223

If nothing seems to work you can try a workaround for firefox as follows:

@-moz-document url-prefix() {
    .uic-wrapper:hover .card-middle {
        transform: translate3d(14px, -12px, -30px);
        opacity: .8;
        width: 90%;
    }

    .uic-wrapper:hover .card-back {
        transform: translate3d(28px, -24px, -120px);
        opacity: .4;
        width: 80%;
    }
}

We are manually setting the X and Y coordinate for transform and also setting some width to match how it should actually look.

Here's a working fiddle https://jsfiddle.net/85a1gxbL/15/

Upvotes: 1

Related Questions