3D Transform

I just launched my first Skillshare class (woohoo!) and in the process of repeatedly extolling the virtues of writing reusable code, I realized I could be doing better.

Every time I want to use a simple, flipping 3D transform, I go digging through my pens and try to remember how I got the effect to run smoothly across browsers. I thought I'd share a few mixins that I finaly put together for the class in this pen:

Rotating elements on hover or timed transitions is one of my favorite, easy CSS party tricks. It is pretty basic, but I'm trying to make the case, to you and myself, that grouping a few CSS elements toghether in a mixin and naming them logically, you can save time when writing SCSS.

SCSS using mixins

In practice, the SCSS for this rotating piece can be this simple when using the three mixins I explain below.

   .container{
    @include flipcontainer;
    .back{
      @include flippingface;
      @include rotatevertical;
    }
    &:hover{
      @include rotatevertical;
    }
  }

Container

I sometimes have trouble with older versions of Safari and Chrome, so I included using translate z (sort of like the 3D z-index), making sure the layers are overlapped correctly and move along the z access. transform-style:preserve-3d should be enough for current browser versions, but including this saves me the trouble of trying to remember why things are wonky in older versions.

Basically, I'm setting up the container for the 3D transform, including easing and making sure the absolute positioned elements are contained in the parent using position:relative.

  @mixin flipcontainer {
  -webkit-transform: translateZ(1px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position:relative;
  transition: all 1s ease-in-out;
}

Back / Flip

This mixin can be used to set the initial state of the hidden layer rotated 190 degrees and we can use it for the hover state to rotate the entire container 180 degrees, revealing the back view.

  @mixin rotatevertical{
  -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

Hidden View

The default view will hide the back, rotated div. We want anything that has been rotated to be invisible. Here, the back is also positioned absolutely at the top of the parent to set it behind the front view.

  @mixin flippingface {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top:0;
  width:100%;
}

Skillshare - Woohoo!

I'll be posting more about some tricks I included in my Skillshare project.

Coming Soon: Triggering animations on mobile (hover vs tap/touch)

Skillshare

My Skillshare class is for people who are familiar with CSS and want to pick up some pointers about transitions along with my tips for structuring a new project. I start out the class with an intro to Codepen, so I hope I lure some more people over to the community that's helped me so much. If you'd like to view my class and leave me feedback, I'd really appreciate it. Your first 2 months on Skillshare are free, so you can sign up now and cancel at any time (and take classes on a wide range of tech and not at all tech topics).


1,423 0 15