/**
 * Module: Roll To
 * Filename: ca__RollTo.css
 */

.rollToLeft {
  animation-name: rollToLeft;
}

@keyframes rollToLeft {
  from {
    transform: translateX(0) perspective(600px) rotateY(0deg);
    opacity: 1;
  }

  to {
    transform: translateX(-100%) perspective(600px) rotateY(180deg);
    opacity: 0;
  }
}

.rollToRight {
  animation-name: rollToRight;
}

@keyframes rollToRight {
  from {
    transform: translateX(0) perspective(600px) rotateY(0deg);
    opacity: 1;
  }

  to {
    transform: translateX(100%) perspective(600px) rotateY(-180deg);
    opacity: 0;
  }
}

.rollToTop {
  animation-name: rollToTop;
}

@keyframes rollToTop {
  from {
    transform: translateY(0) perspective(600px) rotateX(0deg);
    opacity: 1;
  }

  to {
    transform: translateY(-100%) perspective(600px) rotateX(180deg);
    opacity: 0;
  }
}

.rollToBottom {
  animation-name: rollToBottom;
}

@keyframes rollToBottom {
  to {
    transform: translateY(0) perspective(600px) rotateX(0deg);
    opacity: 1;
  }

  to {
    transform: translateY(100%) perspective(600px) rotateX(-180deg);
    opacity: 0;
  }
}