Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Jul 24th, 2012  |  syntax: None  |  size: 0.96 KB  |  hits: 15  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. CSS3 Transformed elements lose their transform during transition. (jsFiddle included)
  2. div {
  3.     background: black;
  4.     height: 60px;
  5.     position: relative;
  6.     width: 120px;
  7.     -webkit-transition: .25s;
  8.        -moz-transition: .25s;
  9.         -ms-transition: .25s;
  10.          -o-transition: .25s;
  11.             transition: .25s;
  12. }
  13. div:after {
  14.     border-left: 60px solid transparent;
  15.     border-right: 60px solid transparent;
  16.     border-top: 35px solid black;
  17.     bottom: -35px;
  18.     height: 0;
  19.     content: '';
  20.     left: 0;
  21.     position: absolute;
  22.     width: 0;
  23. }
  24. div:before {
  25.     border-bottom: 35px solid black;
  26.     border-left: 60px solid transparent;
  27.     border-right: 60px solid transparent;
  28.     height: 0;
  29.     content: '';
  30.     left: 0;
  31.     position: absolute;
  32.     top: -35px;
  33.     width: 0;
  34. }
  35. div:hover {
  36.     -webkit-transform: scale(1.5);
  37.        -moz-transform: scale(1.5);
  38.         -ms-transform: scale(1.5);
  39.          -o-transform: scale(1.5);
  40.             transform: scale(1.5);
  41. }
create a new version of this paste RAW Paste Data