JSFiddle

  • Button #3 is the latest revision

    with IE8 compatibility

    <button>Learn More<!--[if IE 8]><div class='ie8-el'></div><![endif]--></button>
  • changing the transform-origin

    No-Library (pure JS), HTML, CSS, JavaScript

    (function(){
    	var a = document.querySelector('.area'), 
          grid = a.querySelector('.box'), 
          createHotSpotGrid = function(n){
            var hotSpot;
            grid = a.removeChild(grid);
            for ...
  • Applying a transform => new stacking context

    Applying a transform on an element (unless its value is none) creates a new stacking context and the element is going to act as a containing block for any position: fixed; children it may have.

    <div class='parent'>
        <div class='child'>No transform applied on my parent.</div>
    </div>
    <div class='parent'>
        <div class='child'><code>transform: rotate(30deg)</code> applied on my parent.</div>
    </div>
  • Applying a transform => new stacking context

    Applying a transform on an element (unless its value is none) creates a new stacking context and the element is going to act as a containing block for any position: fixed; children it may have.

    <div class='parent'>
        <div class='child'>No transform applied on my parent.</div>
    </div>
    <div class='parent'>
        <div class='child'><code>transform: rotate(30deg)</code> applied on my parent.</div>
    </div>
  • Applying a transform => new stacking context

    Applying a transform on an element (unless its value is none) creates a new stacking context and the element is going to act as a containing block for any position: fixed; children it may have.

    <div class='parent'>
        <div class='child'>No transform applied on my parent.</div>
    </div>
    <div class='parent'>
        <div class='child'><code>transform: rotate(30deg)</code> applied on my parent.</div>
    </div>
  • Applying a transform => new stacking context

    Applying a transform on an element (unless its value is none) creates a new stacking context and the element is going to act as a containing block for any position: fixed; children it may have.

    <div class='parent'>
        <div class='child'>No transform applied on my parent.</div>
    </div>
    <div class='parent'>
        <div class='child'><code>transform: rotate(30deg)</code> applied on my parent.</div>
    </div>
  • Applying a transform => new stacking context

    Applying a transform on an element (unless its value is none) creates a new stacking context and the element is going to act as a containing block for any position: fixed; children it may have.

    <div class='parent'>
        <div class='child'>No transform applied on my parent.</div>
    </div>
    <div class='parent'>
        <div class='child'><code>transform: rotate(30deg)</code> applied on my parent.</div>
    </div>
  • Applying a transform => new stacking context

    Applying a transform on an element (unless its value is none) creates a new stacking context and the element is going to act as a containing block for any position: fixed; children it may have.

    <div class='parent'>
        <div class='child'>No transform applied on my parent.</div>
    </div>
    <div class='parent'>
        <div class='child'><code>transform: rotate(30deg)</code> applied on my parent.</div>
    </div>
  • Applying a transform => new stacking context

    Applying a transform on an element (unless its value is none) creates a new stacking context and the element is going to act as a containing block for any position: fixed; children it may have.

    // What were you hoping to find here? No, no JavaScript at all for this demo.
  • Applying a transform => new stacking context

    Applying a transform on an element (unless its value is none) creates a new stacking context and the element is going to act as a containing block for any position: fixed; children it may have.

    <div class='parent'>
        <div class='child'>No transform applied on my parent.</div>
    </div>
    <div class='parent'>
        <div class='child'><code>transform: rotate(30deg)</code> applied on my parent.</div>
    </div>