How to create a module in joomla in Metro UI style?

Question

css

Hello!
Help to create, a complete teapot (absolutely) a module in joomla in the metro style (Metro UI), with an animation of switching when you hover over the mouse, the transition from image to text, using css or HTML.
I found the code on github:

}
.flipbox {
  display: block;
  position: relative;
  -webkit-perspective: 800;
  -moz-perspective: 800;
  -ms-perspective: 800;
  -0-perspective: 800;
  perspective: 800;
}

.flipbox > div {
  height: 100%;
  width: 100%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 300ms;
  -moz-transition: -moz-transform 300ms;
  -ms-transition: -ms-transform 300ms;
  -o-transition: -o-transform 300ms;
  transition: transform 300ms;
}

.flipbox > div > div {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flipbox > div > *:last-child {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flipbox.flipped > div {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

And I entered it in the template.css file. set the class flipbox for the CSS module. But he didn't pick up.
Tell me what am I doing wrong?

Answer 1

Have you cleared the cache, debugged with Chrome DevTools? Perhaps the parent class of the module "interrupts" yours.