Flipper

Creating the flip effect in a simple manner without lots of CSS

Example

<!-- horizontal -->
<div class="flip flip-h" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  <div class="flip-front">
    <svg class="img-svg img-5x img-muted flip-image">
      <use xlink:href="//design.umbler.com//assets/svg/sprite-umbler.svg#node-js"></use>
    </svg>
  </div>
  <div class="flip-back"> 
    <svg class="img-svg img-5x img-primary flip-image">
      <use xlink:href="//design.umbler.com//assets/svg/sprite-umbler.svg#heart"></use>
    </svg>
  </div>
</div>

<!-- active -->
<div class="flip flip-h flipped" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  <div class="flip-front">
    <svg class="img-svg img-5x img-muted flip-image">
      <use xlink:href="//design.umbler.com//assets/svg/sprite-umbler.svg#node-js"></use>
    </svg>
  </div>
  <div class="flip-back bg-white"> 
    <svg class="img-svg img-5x img-primary flip-image">
      <use xlink:href="//design.umbler.com//assets/svg/sprite-umbler.svg#heart"></use>
    </svg>
  </div>
</div>

Rounded flip

Use .rounded-circle.

<!-- horizontal -->
<div class="flip flip-h rounded-circle"> 
  <div class="flip-front">
    ...
  </div>
  <div class="flip-back"> 
    ...
  </div>
</div>

With controls

<div class="flip flip-h"> 
  <div class="flip-front">
    <svg class="img-svg img-5x img-muted flip-image">
      <use xlink:href="//design.umbler.com//assets/svg/sprite-logos.svg#docker"></use>
    </svg>
  </div>
  <div class="flip-back"> 
    <div class="flex-xs flex-xs-middle h-100">
      <div class="btn-group mx-auto" role="group">
        <button type="button" class="btn btn-secondary tooltip-test" data-toggle="tooltip" data-trigger="hover" data-placement="top" title="Permissions"><span class="icon icon-lock-open"></span></button>
        <button type="button" class="btn btn-secondary tooltip-test" data-toggle="tooltip" data-trigger="hover" data-placement="top" title="Edit"><span class="icon icon-pencil"></span></button>
      </div>
    </div>
  </div>
</div>

Usage

  • flip-h: Horizontal flip
  • flipped: Active class