So I have this title-screen &quot;animation&quot; that has the title centered on a fullscreen page and when you scroll down it becomes smaller and remains at the top of the page. Here is a working example with the expected behavior, from which I stripped all unnecessary code to make it minimal:

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    $(window).scroll( () =&gt; {
        &quot;use strict&quot;;
        let windowH = $(window).height();
        let windowS = $(window).scrollTop();
        let header  = $(&quot;#header&quot;).height(); 
    	
        if (windowS &lt; windowH-header) {
            $(&quot;#title&quot;).css(&quot;transform&quot;, &quot;scale(&quot;+(2-(windowS/($(document).outerHeight()-windowH))*2.7)+&quot;)&quot;);
            $(&quot;#header&quot;).css(&quot;transform&quot;, &quot;translateY(0)&quot;);
            $(&quot;#inside, #content&quot;).css({
                &quot;position&quot;: &quot;static&quot;,
                &quot;margin-top&quot;: 0
            });
        } else {
            $(&quot;#inside&quot;).css({
                &quot;position&quot;: &quot;fixed&quot;,
                &quot;margin-top&quot;: -windowH+header
            });
            $(&quot;#content&quot;).css(&quot;margin-top&quot;, windowH);
        }
      
        $(&quot;#header&quot;).css(&quot;position&quot;, windowS &gt; (windowH-header)/2 ? &quot;fixed&quot; :&quot;static&quot;);
    });

&lt;!-- language: lang-css --&gt;

    .fixed {
        position: fixed!important;
    }
    .wrapper {
        width: 100%;
        text-align: center;
    }
    .wrapper:before {
        display: table;
        content: &quot; &quot;;
    }
    .wrapper:after {
        clear: both;
    }
    #inside {
        width: 100%;
        height: 100vh;
        background-color: lightcoral;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #header {
        height: 90px;
        top: 0;
        position: sticky;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.5s;
    }
    #title {
        width: 100%;
        color: #fff;
        transform: scale(2);
    }
    #content {
        height: 1000px;
        background-color: lightblue;
    }

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;body&gt;	
        &lt;div class=&quot;wrapper&quot;&gt;
            &lt;div id=&quot;inside&quot;&gt;
                &lt;div id=&quot;header&quot;&gt;
                    &lt;h1 id=&quot;title&quot;&gt;Title&lt;/h1&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;div id=&quot;content&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;

&lt;!-- end snippet --&gt;



Next up is the exact same snippet but with one addition: I applied a filter, which is, as far as I&#39;m concerned, purely cosmetic: `filter: brightness(1.3);`.

As you can see below when you scroll half-way through the &quot;animation&quot; the title just disappears. When you inspect the element it still has all its properties but somehow it&#39;s gone. This is the same in Firefox and Chrome and I have no idea why. I would appreciate it a lot if someone could post a working snippet with the filter applied and explain why it didn&#39;t work before.

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    $(window).scroll( () =&gt; {
        &quot;use strict&quot;;
        let windowH = $(window).height();
        let windowS = $(window).scrollTop();
        let header  = $(&quot;#header&quot;).height(); 
    	
        if (windowS &lt; windowH-header) {
            $(&quot;#title&quot;).css(&quot;transform&quot;, &quot;scale(&quot;+(2-(windowS/($(document).outerHeight()-windowH))*2.7)+&quot;)&quot;);
            $(&quot;#header&quot;).css(&quot;transform&quot;, &quot;translateY(0)&quot;);
            $(&quot;#inside, #content&quot;).css({
                &quot;position&quot;: &quot;static&quot;,
                &quot;margin-top&quot;: 0
            });
        } else {
            $(&quot;#inside&quot;).css({
                &quot;position&quot;: &quot;fixed&quot;,
                &quot;margin-top&quot;: -windowH+header
            });
            $(&quot;#content&quot;).css(&quot;margin-top&quot;, windowH);
        }
      
        $(&quot;#header&quot;).css(&quot;position&quot;, windowS &gt; (windowH-header)/2 ? &quot;fixed&quot; :&quot;static&quot;);
    });

&lt;!-- language: lang-css --&gt;

    .fixed {
        position: fixed!important;
    }
    .wrapper {
        width: 100%;
        text-align: center;
    }
    .wrapper:before {
        display: table;
        content: &quot; &quot;;
    }
    .wrapper:after {
        clear: both;
    }
    #inside {
        width: 100%;
        height: 100vh;
        background-color: lightcoral;
        filter: brightness(1.3);        /*&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;*/
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #header {
        height: 90px;
        top: 0;
        position: sticky;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.5s;
    }
    #title {
        width: 100%;
        color: #fff;
        transform: scale(2);
    }
    #content {
        height: 1000px;
        background-color: lightblue;
    }

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;body&gt;	
        &lt;div class=&quot;wrapper&quot;&gt;
            &lt;div id=&quot;inside&quot;&gt;
                &lt;div id=&quot;header&quot;&gt;
                    &lt;h1 id=&quot;title&quot;&gt;Title&lt;/h1&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;div id=&quot;content&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;

&lt;!-- end snippet --&gt;



Why does applying a CSS-Filter on the parent break the child positioning?

I&#39;m having an issue in chrome with a css3 transform rotate transition. The transition is working fine but just after it finishes the element shifts by a pixel. The other strange thing is that it only happens when the page is centered (`margin:0 auto;`). The bug is still there if you remove the transition as well.

You can see it happening here:  

http://jsfiddle.net/MfUMd/1/

HTML:

    &lt;div class=&quot;wrap&quot;&gt;
        &lt;img src=&quot;https://github.com/favicon.ico&quot; class=&quot;target&quot; alt=&quot;img&quot;/&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;wrap&quot;&gt;
        &lt;div class=&quot;block&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

CSS:

    .wrap {
        margin:50px auto;
        width: 100px;
    }
    .block {
        width:30px;
        height:30px;
        background:black;
    }
    .target,.block {
        display:block;
        -webkit-transition: all 0.4s ease;
    	-moz-transition: all 0.4s ease;
    	-o-transition: all 0.4s ease;
    	transition: all 0.4s ease;
    }
    .target:hover,.block:hover {
    	-webkit-transform: rotate(90deg); 
        -moz-transform: rotate(90deg); 
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);  
    }

Comment out the `margin:0 auto;` line to make it go away.

Anyone have any ideas of how to stop this while keeping the page centered?

I&#39;m using Version 24.0.1312.57 on OSX 10.6.8

Cheers

CSS3 transform rotate causing 1px shift in Chrome

I&#39;m hoping that there&#39;s a relatively simple way to rotate a webpage a little bit, 30 degrees or so, while still leaving it fully functional and usable.

I completely control the page, and can modify it to make this easier if needed.  I&#39;d rather not re-write the whole thing in SVG, though, but perhaps javascript and canvas will work?

Is there a way using CSS, Javascript, or some other cross browser method that would allow me to accomplish this?

Rotate webpage via code?

Ok, so here&#39;s another IE10 glitch. The problem is that applying perspective on parent elements breaks the backface-visibility hidden setting. Please see this fiddle: http://jsfiddle.net/2y4eA

When you hover over the red square it rotates by 180&#176; on the x-axis, and even though the backface-visibility is set to hidden, the backface is shown, at least until the 180&#176; is reached, then it disappears. Remove the perspective property, and you&#39;ll see that it works as expected, the backface isn&#39;t visible at all, but ofcourse the 3d effect is lost.

It&#39;s possible to workaround this problem by applying perspective in the transform property: http://jsfiddle.net/M2pyb But this will cause problems in cojunction with transform-origin-z, when z is set to anything other than 0, the whole thing becomes &quot;scaled&quot;: http://jsfiddle.net/s4ndv so unfortunately that&#39;s not a solution.

The backface-visibilty thingy is probaly a bug? If so, is there any workaound other than the one i&#39;ve mentioned?

Why is backface-visibility hidden not working in IE10 when perspective is applied to parent elements?

I am applying a CSS transform (and the browser specific -webkit, -o etc):

transform: matrix(0.5 , 0 , 0, 0.5, 0 , 0);

to a div then using jQuery&#39;s draggable() and resizable() plugins on children of said div.

The problem I had was that when dragging or resizing the child elements, the alteration jQuery made were out of &quot;sync&quot; with the mouse by a factor equal to the scale applied.

I found a solution on stackoverflow (though I stupidly did not bookmark it and now cant find it....) that suggested patching the plugins, and it worked wonderfully. It went along these line:
    
    function monkeyPatch_mouseStart() {
      // don&#39;t really need this, but in case I did, I could store it and chain
      // var oldFn = $.ui.draggable.prototype._mouseStart ;
      $.ui.draggable.prototype._mouseStart = function(event) {

        var o = this.options;

        //Create and append the visible helper
        this.helper = this._createHelper(event);

        //Cache the helper size
        this._cacheHelperProportions();

        //If ddmanager is used for droppables, set the global draggable
        if($.ui.ddmanager)
          $.ui.ddmanager.current = this;

        /*
         * - Position generation -
         * This block generates everything position related - it&#39;s the core of draggables.
         */

        //Cache the margins of the original element
        this._cacheMargins();

        //Store the helper&#39;s css position
        this.cssPosition = this.helper.css(&quot;position&quot;);
        this.scrollParent = this.helper.scrollParent();

        //The element&#39;s absolute position on the page minus margins

        //PATCH CODE
        this.offset = this.positionAbs = getViewOffset(this.element[0]);
        //END

        this.offset = {
          top: this.offset.top - this.margins.top,
          left: this.offset.left - this.margins.left
        };

        $.extend(this.offset, {
          click: { //Where the click happened, relative to the element
            left: event.pageX - this.offset.left,
            top: event.pageY - this.offset.top
          },
          parent: this._getParentOffset(),
          relative: this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper
        });

        //Generate the original position
        this.originalPosition = this.position = this._generatePosition(event);
        this.originalPageX = event.pageX;
        this.originalPageY = event.pageY;

        //Adjust the mouse offset relative to the helper if &#39;cursorAt&#39; is supplied
        if(o.cursorAt &amp;&amp; this._adjustOffsetFromHelper(o.cursorAt)){
        }

        //Set a containment if given in the options
        if(o.containment)
          this._setContainment();

        //Trigger event + callbacks
        if(this._trigger(&quot;start&quot;, event) === false) {
          this._clear();
          return false;
        }

        //Recache the helper size
        this._cacheHelperProportions();

        //Prepare the droppable offsets
        if ($.ui.ddmanager &amp;&amp; !o.dropBehaviour)
          $.ui.ddmanager.prepareOffsets(this, event);

        this.helper.addClass(&quot;ui-draggable-dragging&quot;);
        this._mouseDrag(event, true); //Execute the drag once - this causes the helper not to be visible before getting its correct position

        //If the ddmanager is used for droppables, inform the manager that dragging has started (see #5003)
        if ( $.ui.ddmanager &amp;&amp; $.ui.ddmanager.dragStart) $.ui.ddmanager.dragStart(this, event);

        return true;
      }
     }

    function getViewOffset(node) {
      var x = 0, y = 0, win = node.ownerDocument.defaultView || window;
      if (node) addOffset(node);
      return { left: x, top: y };

      function getStyle(node) {
        return node.currentStyle || // IE
               win.getComputedStyle(node, &#39;&#39;);
      }

      function addOffset(node) {
        var p = node.offsetParent, style, X, Y;
        x += parseInt(node.offsetLeft, 10) || 0;
        y += parseInt(node.offsetTop, 10) || 0;

        if (p) {
          x -= parseInt(p.scrollLeft, 10) || 0;
          y -= parseInt(p.scrollTop, 10) || 0;

          if (p.nodeType == 1) {
            var parentStyle = getStyle(p)
              , localName   = p.localName
              , parent      = node.parentNode;
            if (parentStyle.position != &#39;static&#39;) {
              x += parseInt(parentStyle.borderLeftWidth, 10) || 0;
              y += parseInt(parentStyle.borderTopWidth, 10) || 0;

              if (localName == &#39;TABLE&#39;) {
                x += parseInt(parentStyle.paddingLeft, 10) || 0;
                y += parseInt(parentStyle.paddingTop, 10) || 0;
              }
              else if (localName == &#39;BODY&#39;) {
                style = getStyle(node);
                x += parseInt(style.marginLeft, 10) || 0;
                y += parseInt(style.marginTop, 10) || 0;
              }
            }
            else if (localName == &#39;BODY&#39;) {
              x += parseInt(parentStyle.borderLeftWidth, 10) || 0;
              y += parseInt(parentStyle.borderTopWidth, 10) || 0;
            }

            while (p != parent) {
              x -= parseInt(parent.scrollLeft, 10) || 0;
              y -= parseInt(parent.scrollTop, 10) || 0;
              parent = parent.parentNode;
            }
            addOffset(p);
          }
        }
        else {
          if (node.localName == &#39;BODY&#39;) {
            style = getStyle(node);
            x += parseInt(style.borderLeftWidth, 10) || 0;
            y += parseInt(style.borderTopWidth, 10) || 0;

            var htmlStyle = getStyle(node.parentNode);
            x -= parseInt(htmlStyle.paddingLeft, 10) || 0;
            y -= parseInt(htmlStyle.paddingTop, 10) || 0;
          }

          if ((X = node.scrollLeft)) x += parseInt(X, 10) || 0;
          if ((Y = node.scrollTop))  y += parseInt(Y, 10) || 0;
        }
      }
    }
    var isNumber = function(value) {
      return !isNaN(parseInt(value, 10));
    };

I have made my own changes such as (you can see on the 6-7 lines the multiplication of the movement by a &quot;scale factor&quot;):


     $.ui.draggable.prototype._generatePosition = function(event) {
        var o = this.options, scroll = this.cssPosition == &#39;absolute&#39; &amp;&amp; !(this.scrollParent[0] != document &amp;&amp; $.ui.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName);
        var pageX = event.pageX;
        var pageY = event.pageY;
        //PATCH CODE
        if($(this.element[0]).hasClass(&#39;item&#39;)){
            pageY = this.originalPageY + ((pageY - this.originalPageY)*(1/$.viewbox.foreground.scale));
            pageX = this.originalPageX + ((pageX - this.originalPageX)*(1/$.viewbox.foreground.scale));
        }
        //END
        /*
         * - Position constraining -
         * Constrain the position to a mix of grid, containment.
         */

        if(this.originalPosition) { //If we are not dragging yet, we won&#39;t check for options

          if(this.containment) {
            if(event.pageX - this.offset.click.left &lt; this.containment[0]) pageX = this.containment[0] + this.offset.click.left;
            if(event.pageY - this.offset.click.top &lt; this.containment[1]) pageY = this.containment[1] + this.offset.click.top;
            if(event.pageX - this.offset.click.left &gt; this.containment[2]) pageX = this.containment[2] + this.offset.click.left;
            if(event.pageY - this.offset.click.top &gt; this.containment[3]) pageY = this.containment[3] + this.offset.click.top;
          }

          if(o.grid) {
            var top = this.originalPageY + Math.round((pageY - this.originalPageY) / o.grid[1]) * o.grid[1];
            pageY = this.containment ? (!(top - this.offset.click.top &lt; this.containment[1] || top - this.offset.click.top &gt; this.containment[3]) ? top : (!(top - this.offset.click.top &lt; this.containment[1]) ? top - o.grid[1] : top + o.grid[1])) : top;

            var left = this.originalPageX + Math.round((pageX - this.originalPageX) / o.grid[0]) * o.grid[0];
            pageX = this.containment ? (!(left - this.offset.click.left &lt; this.containment[0] || left - this.offset.click.left &gt; this.containment[2]) ? left : (!(left - this.offset.click.left &lt; this.containment[0]) ? left - o.grid[0] : left + o.grid[0])) : left;
          }
        }
        return {
          top: (
            pageY                               // The absolute mouse position
            - this.offset.click.top                         // Click offset (relative to the element)
            - this.offset.relative.top                        // Only for relative positioned nodes: Relative offset from element to offset parent
            - this.offset.parent.top                        // The offsetParent&#39;s offset without borders (offset + border)
            + ($.browser.safari &amp;&amp; $.browser.version &lt; 526 &amp;&amp; this.cssPosition == &#39;fixed&#39; ? 0 : ( this.cssPosition == &#39;fixed&#39; ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ))
          ),
          left: (
            pageX                               // The absolute mouse position
            - this.offset.click.left                        // Click offset (relative to the element)
            - this.offset.relative.left                       // Only for relative positioned nodes: Relative offset from element to offset parent
            - this.offset.parent.left                       // The offsetParent&#39;s offset without borders (offset + border)
            + ($.browser.safari &amp;&amp; $.browser.version &lt; 526 &amp;&amp; this.cssPosition == &#39;fixed&#39; ? 0 : ( this.cssPosition == &#39;fixed&#39; ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ))
          )
        };

      }

So big thank you to whoever suggested that.

So, my question! Has anyone come across a nice way to have draggable/resizable events inside a scaled element that doesn&#39;t require patching jQuery? I have googled, and this was the best solution I could find. Does anyone know of alternative to jquery that perhaps works under these conditions, with CSS transforms?

Many thanks for any responses.

jQuery Drag/Resize with CSS Transform Scale

&gt; **Possible Duplicate:**  
&gt; [iphone webkit css animations cause flicker](https://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker)  

&lt;!-- End of automatically inserted text --&gt;

For some reason, right before my animation of the webkit-transform property occurs, there is a slight flicker.  Here is what I am doing:

CSS:

    #element {
        -webkit-transition: -webkit-transform 500ms;
    }

JavaScript:

    $(&quot;#element&quot;).css(&quot;-webkit-transform&quot;, &quot;translateX(&quot; + value + &quot;px)&quot;);

Right before the transition takes place, there is a flicker.  Any idea why this is, and how I could fix the problem?

Thanks!

**Update:** this only occurs in Safari. It does not happen in Chrome, although the animation does work.

Prevent flicker on webkit-transition of webkit-transform

Using CSS, how can I apply more than one `transform`?

Example: In the following, only the translation is applied, not the rotation.

    li:nth-child(2) {
        transform: rotate(15deg);
    	transform: translate(-20px,0px);		
    }

How to apply multiple transforms in CSS?

I have a situation where, in normal CSS circumstances, a fixed div would be positioned exactly where it is specified (`top:0px`, `left:0px`). 

This does not seem to be respected if I have a parent that has a translate3d transform. Am I not seeing something? I have tried other webkit-transform like style and transform origin options but had no luck.

I have attached a [JSFiddle][1] with an example where I would have expected the yellow box be at the top corner of the page rather than inside of the container element.

You can find below a simplified version of the fiddle:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    #outer {
        position:relative; 
        -webkit-transform:translate3d(0px, 20px , 0px); 
        height: 300px; 
        border: 1px solid #5511FF; 
        padding: 10px;
        background: rgba(100,180,250, .8); 
        width: 80%;
    }
    #middle{
        position:relative; 
        border: 1px dotted #445511; 
        height: 300px; 
        padding: 5px;
        background: rgba(250,10,255, .6);
    }
    #inner {
        position: fixed; 
        top: 0px;
        box-shadow: 3px 3px 3px #333; 
        height: 20px; 
        left: 0px;
        background: rgba(200,180,80, .8); 
        margin: 5px; 
        padding: 5px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;container&quot;&gt;
        Blue: Outer, &lt;br&gt;
        Purple: Middle&lt;br&gt;
        Yellow: Inner&lt;br&gt;
        &lt;div id=&quot;outer&quot;&gt; 
            &lt;div id=&quot;middle&quot;&gt;
                &lt;div id=&quot;inner&quot;&gt;
                    Inner block
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

How can I make translate3d work with fixed-positioned children?


  [1]: http://jsfiddle.net/GMX5H/1/

&#39;transform3d&#39; not working with position: fixed children

Let&#39;s say I have a couple of columns, of which some I&#39;d like to rotate the values of:

http://jsfiddle.net/MTyFP/1/

    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;statusColumn&quot;&gt;&lt;span&gt;Normal&lt;/span&gt;&lt;/div&gt;
        &lt;div class=&quot;statusColumn&quot;&gt;&lt;a&gt;Normal&lt;/a&gt;&lt;/div&gt;
        &lt;div class=&quot;statusColumn&quot;&gt;&lt;b&gt;Rotated&lt;/b&gt;&lt;/div&gt;
        &lt;div class=&quot;statusColumn&quot;&gt;&lt;abbr&gt;Normal&lt;/abbr&gt;&lt;/div&gt;
    &lt;/div&gt;

With this CSS:

    .statusColumn b {
      writing-mode: tb-rl;
      white-space: nowrap;
      display: inline-block;
      overflow: visible;
      transform: rotate(-90deg);
      transform-origin: 50% 50%;
    }

It ends up looking like this:

![A series of four block-level elements. The third element&#39;s text is rotated.][1]

Is it possible to write any CSS that will cause the rotated element to affect its parent&#39;s height, such that the text would not overlap the other elements? Something like this:

![The third column&#39;s text now affects its parent box&#39;s height such that the text fits within the box.][2]


  [1]: http://i.stack.imgur.com/gIK5E.png
  [2]: http://i.stack.imgur.com/d82jr.jpg

Rotated elements in CSS that affect their parent&#39;s height correctly

I&#39;m having some problems rotating and positioning a line of text. Now it&#39;s just position that works. The rotation also works, but only if I disable the positioning.

CSS:


    #rotatedtext {
        transform-origin: left;
        transform: rotate(90deg);
        transform: translate(50%, 50%);
    }

The html is just plain text.

Rotate and translate

I am experimenting with css filters.

And I would like use the blur and grayscale at the same time, but I can&#39;t seem to use both simultaneously on the same image?

See fiddle here...

http://jsfiddle.net/joshmoto/fw0m9fzu/1/

    .blur {
        filter: blur(5px);
    	-webkit-filter: blur(5px);
    	-moz-filter: blur(5px);
    	-o-filter: blur(5px);
    	-ms-filter: blur(5px);
    }
    
    .grayscale {
        filter: grayscale(1);
    	-webkit-filter: grayscale(1);
    	-moz-filter: grayscale(1);
    	-o-filter: grayscale(1);
    	-ms-filter: grayscale(1);
    }

&lt;br/&gt;

    .blur-grayscale {
        filter: blur(5px) grayscale(1);
    	-webkit-filter: blur(5px) grayscale(1);
    	-moz-filter: blur(5px) grayscale(1);
    	-o-filter: blur(5px) grayscale(1);
    	-ms-filter: blur(5px) grayscale(1);
    }


use multiple css filters at the same time?

I am moving 10,000 small div elements in a css3 experiment from the top of the browser viewport to the bottom. For this test I use 2 different approaches:

1. With GPU acceleration using `translate3D(x, y, z)` or `translateZ(0)`
2. No GPU acceleration by simply adjusting the `top` property in css

Using **NO** hardware-acceleration runs fairly smooth on Google Chrome.

&lt;img src=&quot;&quot; alt=&quot;&quot;&gt;

If I enable hardware-acceleration performance becomes a lot worse. It&#39;s so bad the boxes aren&#39;t even spread out evenly anymore:

### With GPU/Hardware acceleration:

---
&lt;img src=&quot;https://www.timo-ernst.net/misc/hwtest/video/gpu.gif&quot; alt=&quot;&quot;&gt;

---

### Without GPU/Hardware acceleration:

---
&lt;img src=&quot;https://www.timo-ernst.net/misc/hwtest/video/no-gpu.gif&quot; alt=&quot;&quot;&gt;

---

### Question

Why is that so? Shouldn&#39;t using the GPU improve performance?

### Demo application

https://www.timo-ernst.net/misc/hwtest/

### Source

https://github.com/valnub/hwtest

### My hardware used for test

- Apple Macbook Pro 15&quot; 2015 Model
- CPU 2,8 GHz Intel Core i7
- 16 GB RAM
- macOS Big Sur 11.2

-----------------------

***Update** (2014-11-13): Since this question is still attracting attention I&#39;d like to point out that the problem itself still seems to exist although the mentioned stuttering might not be visible anymore in the provided demo **on modern hardware**. Older devices might still see performance issues.*

***Update II** (2021-02-17): The problem still persists but you will have to increase the number of boxes being moved in the demo based on the hardware used. I changed the UI of the demo app so you can now adjust the number of boxes moved to create a stuttering animation for your specific hardware. To replicate the issue I recommend to create enough boxes to see stuttering with GPU/hardware acceleration enabled. Then tick off the box and run the test again without acceleration. The animation should be smoother.

Why does enabling hardware-acceleration in CSS3 slow down performance?

I&#39;m using CSS transitions to transition between CSS transformed states (basically transitioning the scale of an element). I notice that when the element is transitioning, the rest of the text on the page (in Webkit) tends to slightly alter its rendering until the transition is done. 

Fiddle: [http://jsfiddle.net/russelluresti/UeNFK/][1]

I also noticed that this does not occur on my headers, which have the `-webkit-font-smoothing: antialiased` property/value pair on them. So, I&#39;m wondering, is there any way to have the text maintain its default look (the &quot;auto&quot; value for font-smoothing) and not alter rendering during a transition.

I&#39;ve tried explicitly setting the text to use the &quot;auto&quot; value, but that doesn&#39;t do anything. I should also note that setting font-smoothing to &quot;none&quot; also prevents the rendering blink during transition.

Any help is appreciated.

**Edit 1**

I should note that I am on OS X. While looking at my test in Chrome on Parallels, I did not see the two different paragraphs behaving differently, so this may be an issue exclusive to Macs.

  [1]: http://jsfiddle.net/russelluresti/UeNFK/

How to prevent Webkit text rendering change during CSS transition

I&#39;m trying to get a **transition hover effect on border** that the border expands on hover. 
  

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    h1 {
      color: #666;
    }

    h1:after {
      position: absolute;
      left: 10px;
      content: &#39;&#39;;
      height: 40px;
      width: 275px;
      border-bottom: solid 3px #019fb6;
      transition: left 250ms ease-in-out, right 250ms ease-in-out;
      opacity: 0;
    }

    h1:hover:after {
      opacity: 1;
    }

&lt;!-- language: lang-html --&gt;

    &lt;h1&gt;CSS IS AWESOME&lt;/h1&gt;

&lt;!-- end snippet --&gt;

I&#39;ve tried this on [Jsfiddle][1]


  [1]: http://jsfiddle.net/mfn5nefb/

Hover effect : expand bottom border

How to combine `rotateX(50deg) rotateY(20deg) rotateZ(15deg)` in shorthand `rotate3d()`?

rotate3d shorthand

I wanted to mirror letter `E` in the word `WEBLOG` so I used CSS transform property but it doesn&#39;t work if I wrap the text inside a span but it works if I assing `display: inline-block;` or `display: block;` 

**So transforms doesn&#39;t apply to inline elements?**

[**Example 1**][1] (Fails To Transform)

    &lt;h1&gt;W&lt;span&gt;E&lt;/span&gt;BLOG&lt;/h1&gt;

    h1 span {
        transform:rotate(7deg);
        -ms-transform:rotate(7deg); /* IE 9 */
        -moz-transform:rotate(7deg); /* Firefox */
        -webkit-transform:rotate(7deg); /* Safari and Chrome */
        -o-transform:rotate(7deg); /* Opera */
    }

[**Example 2**][2] (Works, If Used `display: block` OR `display: inline-block`)


  [1]: http://jsfiddle.net/4hwMm/
  [2]: http://jsfiddle.net/4hwMm/1/

CSS transform doesn&#39;t work on inline elements

We now all know, particularly from [that nice article](http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/), that we should prefer css-transforms to animate position.

But we got the choice between `translate()` and `translate3d()`...

Which one is *generally* faster?

translate3d vs translate performance

**tl;dr:** *I would like to create an actual 3d sphere with CSS - not just an illusion*

Note: some of the snippet examples are not responsive. Please use full screen. 


----------


With pure CSS you can **create and animate**  a 3d cube like so:



&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    #cube-wrapper {
      position: absolute;
      left: 50%;
      top: 50%;
      perspective: 1500px;
    }

    .cube {
      position: relative;
      transform-style: preserve-3d;
      animation-name: rotate;
      animation-duration: 30s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    @keyframes rotate {
      0% {
        transform: rotate3d(0, 0, 0, 0);
      }
      100% {
        transform: rotate3d(0, 1, 0, 360deg);
        ;
      }
    }

    .face {
      position: absolute;
      width: 200px;
      height: 200px;
      border: solid green 3px;
    }

    #front_face {
      transform: translateX(-100px) translateY(-100px) translateZ(100px);
      background: rgba(255, 0, 0, 0.5);
    }

    #back_face {
      transform: translateX(-100px) translateY(-100px) translateZ(-100px);
      background: rgba(255, 0, 255, 0.5);
    }

    #right_face {
      transform: translateY(-100px) rotateY(90deg);
      background: rgba(255, 255, 0, 0.5);
    }

    #left_face {
      transform: translateY(-100px) translateX(-200px) rotateY(90deg);
      background: rgba(0, 255, 0, 0.5);
    }

    #top_face {
      transform: translateX(-100px) translateY(-200px) rotateX(90deg);
      background: rgba(0, 255, 255, 0.5);
    }

    #bottom_face {
      transform: translateX(-100px) rotateX(90deg);
      background: rgba(255, 255, 255, 0.5);
    }

    .cube {
      transform: rotateX(90deg) rotateY(90deg);
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;cube-wrapper&quot;&gt;
      &lt;div class=&quot;cube&quot;&gt;
        &lt;div id=&quot;front_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;right_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;back_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;left_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;top_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;bottom_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

**I want to create and animate a 3d sphere in the same manner.**

So... the first idea I get is to use `border-radius` and...well... it doesn&#39;t work. 




&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    #cube-wrapper {
      position: absolute;
      left: 50%;
      top: 50%;
      perspective: 1500px;
    }

    .cube {
      position: relative;
      transform-style: preserve-3d;
      animation-name: rotate;
      animation-duration: 30s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    @keyframes rotate {
      0% {
        transform: rotate3d(0, 0, 0, 0);
      }
      100% {
        transform: rotate3d(0, 1, 0, 360deg);
       
        ;
      }
    }


    .face {
      position: absolute;
      width: 200px;
      height: 200px;
      border: solid green 3px;
      border-radius: 100vw
    }


     

    #front_face {
      transform: translateX(-100px) translateY(-100px) translateZ(100px);
      background: rgba(255, 0, 0, 0.5);
    }

    #back_face {
      transform: translateX(-100px) translateY(-100px) translateZ(-100px);
      background: rgba(255, 0, 255, 0.5);
    }

    #right_face {
      transform: translateY(-100px) rotateY(90deg);
      background: rgba(255, 255, 0, 0.5);
    }

    #left_face {
      transform: translateY(-100px) translateX(-200px) rotateY(90deg);
      background: rgba(0, 255, 0, 0.5);
    }

    #top_face {
      transform: translateX(-100px) translateY(-200px) rotateX(90deg);
      background: rgba(0, 255, 255, 0.5);
    }

    #bottom_face {
      transform: translateX(-100px) rotateX(90deg);
      background: rgba(255, 255, 255, 0.5);
    }

    .cube {
      transform: rotateX(90deg) rotateY(90deg);
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;cube-wrapper&quot;&gt;
      &lt;div class=&quot;cube&quot;&gt;
        &lt;div id=&quot;front_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;right_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;back_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;left_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;top_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;bottom_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;


So, I reconsidered my approach and looked for a different method. 

I looked at:

 - https://stackoverflow.com/questions/29300573/implementing-pure-css-sphere-into-website-how-do-i-do-it
 - https://stackoverflow.com/questions/30891893/how-to-create-a-sphere-in-css
 - [Display an image wrapped around a sphere with CSS/Javascript
   ](https://stackoverflow.com/a/24561907/8157693)
 - [cssanimation.rocks - CSS spheres](https://cssanimation.rocks/spheres/)
 - [MDN -
   Circle](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle)
 

 

Then I tried again...the best I got were overly *complicated* 3d object **illusions**. 

Like this:

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    body {
      overflow: hidden;
      background: #333;
    }

    .wrapper {
      margin: 1em;
      animation-duration: 20s;
    }

    .planet,
    .planet:before,
    .planet:after {
      height: 300px;
      width: 300px;
      border-radius: 100vw;
      will-change: transform;
      margin: 0 auto;
    }

    .planet {
      box-shadow: inset 0px 0px 10px 10px rgba(0, 0, 0, 0.4);
      position: relative;
    }

    .wrapper,
    .planet,
    .planet:before {
      animation-name: myrotate;
      animation-duration: 20s;
    }

    .wrapper,
    .planet,
    .planet:before,
    .planet:after {
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    .planet:before,
    .planet:after {
      content: &#39;&#39;;
      position: absolute;
      top: 0;
      left: 0;
    }

    .planet:before {
      box-shadow: inset 20px 20px 100px 00px rgba(0, 0, 0, .5), 0px 0px 5px 3px rgba(0, 0, 0, .1);
    }

    .planet:after {
      filter: saturate(2.5);
      background: linear-gradient(rgba(0, 0, 0, 1), transparent), url(&quot;https://i.stack.imgur.com/eDYPN.jpg&quot;);
      opacity: 0.3;
      box-shadow: inset -20px -20px 14px 2px rgba(0, 0, 0, .2);
      animation-name: myopacity;
      animation-duration: 5000000s;
    }

    @keyframes myrotate {
      0% {
        transform: rotatez(0deg);
      }
      100% {
        transform: rotatez(360deg);
      }
    }

    @keyframes myopacity {
      0% {
        background-position: 0px;
        transform: rotatez(0deg);
      }
      50% {
        background-position: 100000000px;
      }
      100% {
        background-position: 0;
        transform: rotatez(-360deg);
      }
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;wrapper&quot;&gt;
      &lt;div class=&quot;planet&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

And this:

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    body {
      background: #131418;
    }

    .wrapper {
      margin: 1em;
      max-width: 100%;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .planet,
    .planet:before,
    .planet:after {
      height: 500px;
      width: 500px;
      max-height: 30vw;
      max-width: 30vw;
      border-radius: 100vw;
      will-change: transform;
    }

    .planet {
      box-shadow: inset 0px 0px 100px 10px rgba(0, 0, 0, .5);
      position: relative;
      float: left;
      margin: 0 2em;
    }

    .planet,
    .planet:before,
    .planet:after {
      animation-name: myrotate;
      animation-duration: 10s;
    }

    .wrapper,
    .planet,
    .planet:before,
    .planet:after {
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    .planet:before,
    .planet:after {
      content: &#39;&#39;;
      position: absolute;
      top: 0;
      left: 0;
    }

    .planet:before {
      box-shadow: inset 50px 100px 50px 0 rgba(0, 0, 0, .5), 0 0 50px 3px rgba(0, 0, 0, .25);
      background-image: -webkit-radial-gradient( top, circle cover, #ffffff 0%, #000000 80%);
      opacity: .5;
    }

    .planet:after {
      opacity: .3;
      background-image: -webkit-radial-gradient( bottom, circle, #ffffff 0%, #000000 -200%);
      box-shadow: inset 0px 0px 100px 50px rgba(0, 0, 0, .5);
    }

    @keyframes myrotate {
      0% {
        transform: rotatez(0deg);
      }
      100% {
        transform: rotatez(-360deg);
      }
    }

    .bg {
      background: wheat;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;wrapper&quot;&gt;
      &lt;div class=&quot;planet bg&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

Which are okay until you try to actually rotate them on either the **x-axis** or the **y-axis** like the cube in my first example...here&#39;s what happens then: (simplified example)

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .sphere {
      background: black;
      width: 300px;
      height: 300px;
      border-radius: 100vw;
      animation: myrotate 10s linear infinite
    }

    @keyframes myrotate {
      0% {
        transform: rotate3d(0, 0, 0, 0);
      }
      100% {
        transform: rotate3d(0, 1, 0, 360deg);
      }
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;sphere&quot;&gt;&lt;/div&gt;

&lt;!-- end snippet --&gt;


All you get is a flat 2d object - which is expeceted considering that it&#39;s what the element is


----------


The closest thing I found is the following shape created in a [tutorial by Timo Korinth][1] 

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    @-webkit-keyframes animateWorld {
      0% {
        -webkit-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
      }
      50% {
        -webkit-transform: rotateY(360deg) rotateX(180deg) rotateZ(180deg);
      }
      100% {
        -webkit-transform: rotateY(720deg) rotateX(360deg) rotateZ(360deg);
      }
    }

    html {
      background: #FFFFFF;
    }

    . world {
      -webkit-perspective: 1000px;
    }

    .cube {
      margin-left: auto;
      margin-right: auto;
      position: relative;
      width: 200px;
      height: 200px;
      -webkit-transform-style: preserve-3d;
      -webkit-animation-name: animateWorld;
      -webkit-animation-duration: 10s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
    }

    .circle {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 2px dashed #009BC2;
      border-radius: 50%;
      opacity: 0.8;
      background: rgba(255, 255, 255, 0);
    }

    .zero {
      -webkit-transform: rotateX(90deg);
    }

    .two {
      -webkit-transform: rotateY(45deg);
    }

    .three {
      -webkit-transform: rotateY(90deg);
    }

    .four {
      -webkit-transform: rotateY(135deg);
    }

    .five {
      width: 173px;
      height: 173px;
      margin: 14px;
      -webkit-transform: rotateX(90deg) translateZ(50px);
    }

    .six {
      width: 173px;
      height: 173px;
      margin: 14px;
      -webkit-transform: rotateX(90deg) translateZ(-50px);
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;world&quot;&gt;
      &lt;div class=&quot;cube&quot;&gt;
        &lt;div class=&quot;circle zero&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;circle one&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;circle two&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;circle three&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;circle four&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;circle five&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;circle six&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;


----------


So here&#39;s my 

Question:
--------

**How do I create an actual 3 dimensional sphere with pure CSS? More specifically, one that is covered - not just a frame - and doesn&#39;t involve hundreds of html elements.** 


----------



**Notes:**  

 1. Three dimensional spheres have **height, width and depth** -  just
    like the cube in my first example snippet
 2. I don&#39;t need any physics and there&#39;s no need for any
    user-interaction. Just an animated spinning sphere.

----------


**Additional resources:**

 1. [paulrhayes.com - Spheres](https://paulrhayes.com/experiments/sphere/)
 2. [&lt;s&gt;3d&lt;/s&gt; (2d illusion) Earth with Rotating Animation with CSS][2]
 3. [Interactive CSS sphere][3]




  [1]: http://timokorinth.de/css-3d-sphere/
  [2]: http://w3bits.com/css-earth/
  [3]: http://robosparrow.github.io/Css3dSphere/


How can I create pure CSS 3-dimensional spheres?

I found this: https://stackoverflow.com/questions/7565542/width-height-after-transform 

and several others, but nothing is not quite what I&#39;m looking for. What I want is to scale something to 50% of it&#39;s size (with nice animated transition of course) and have the page layout re-adjust to the new (visual) size of the element. What seems to happen by default is that the element still retains it&#39;s original size in the layout structure, and is merely drawn with the associated transformations. 

Basically I want the user to click on a block of text (or other content), and then scale that text to 50% (or whatever) of it&#39;s size and stick it in a panel below to indicate that it&#39;s been selected. I don&#39;t want 50% whitespace around the element after I move it. 

I&#39;ve tried re-setting the height/width, but that causes the element iself to undergo a new layout and then the scale is applied to the new layout and this still leaves me with 50% white space after all is finished. My mozilla specific (for simplicity) code looks like this:

    &lt;script type=&quot;text/javascript&quot;&gt;
     function zap(e) {
    
      var height = e.parentNode.offsetHeight/2 + &#39;px&#39;;
      var width = e.parentNode.offsetWidth/2 + &#39;px&#39;;
      e.parentNode.style.MozTransform=&#39;scale(0.0)&#39;; 
      e.parentNode.addEventListener(
        &#39;transitionend&#39;, 
        function() { 
          var selectionsArea = document.getElementById(&quot;selected&quot;);
          selectionsArea.appendChild(e.parentNode);
          e.parentNode.style.MozTransform=&#39;scale(0.5,0.5)&#39;; 
          e.parentNode.style.display = &#39;inline-block&#39;;
          e.parentNode.style.height = height;
          e.parentNode.style.width = width;
        },
        true) 
    }
    &lt;/script&gt;

I&#39;m really hoping I don&#39;t have to go into messing with negative margins or relative positioning to achieve this... 

**Edit:** Since writing this I found a very similar question with neither comments or answers. It differs slightly as I don&#39;t care about it being an html5 specific solution, I suspect the solution either doesn&#39;t exist or lies in CSS/javascript regardless of the html level.

https://stackoverflow.com/questions/10627306/scale-zoom-a-dom-element-and-the-space-it-occupies-using-css3-transform-scale

**Edit 2:** (another non-working attempt)

I&#39;ve also tried this, but the scale and the translate functions seem to interact in a manner that makes the final position impossible to predict... and scale before transform doesn&#39;t appear to be the same as transform then scale. Unfortunately it&#39;s not just a matter of adjusting the translate by the scale factor ...

	function posX(e) {
		return e.offsetLeft + (e.offsetParent ? posX(e.offsetParent) : 0)
	}

	function posY(e) {
		return e.offsetTop + (e.offsetParent ? posY(e.offsetParent) : 0)
	}

	function placeThumbNail(e, container, x, y, scale) {
		var contX = posX(container);
		var contY = posY(container);
		var eX = posX(e);
		var eY = posY(e);
		var eW = e.offsetWidth;
		var eH = e.offsetHeight;

		var margin = 10;
		var dx = ((contX - eX) + margin + (x * eW * scale));
		var dy = ((contY - eY) + margin + (y * eH * scale));

		// assumes identical objects     
		var trans = &#39;translate(&#39; + dx + &#39;px, &#39; + dy + &#39;px) &#39;;
		var scale = &#39;scale(&#39; + scale + &#39;,&#39; + scale + &#39;) &#39;;
		e.style.MozTransform =  trans + scale ; 
	}

Even if it worked, the above would still require me to first move the element to the bottom of the page before running this code (to get rid of the whitespace), and furthermore I would need to recalculate the transform on re-size... so I wasn&#39;t too happy with this attempt to start with anyway.

Also note that if you use `scale + trans` vs `trans + scale` above the result is drastically different.

**Edit 3:** I figured out the placement issues... the transforms are applied in the order specified, and `scale(0.5,0.5)` essentially changes the size of a pixel to half what it was originally (probably hinting at how they implemented it internally). If I put translate is first, translating slightly less/more to account for the change in the position of the upper left corner caused by scale will do the trick, but managing the location of the objects and adjusting the transforms when the dom changes in a reasonable manner is still eluding me. This sort of feels wrong because I am drifting in the direction of writing my own layout manager in javascript just to get this effect.


CSS Transform with element resizing

I want to find out how to make a **spinning or rotating image** when it is hovered. I would like to know how to emulate that functionality with *CSS* on the following code :

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    img {
      border-radius: 50%;
    }

&lt;!-- language: lang-html --&gt;

    &lt;img src=&quot;http://i.imgur.com/3DWAbmN.jpg&quot; /&gt;

&lt;!-- end snippet --&gt;



Spin or rotate an image on hover

Similary to &quot;[css transform, jagged edges in chrome][1]&quot;, same occurs with Firefox on 3D transforms, eg: http://jsfiddle.net/78d8K/5/ (&lt;- remember: **Firefox**)

This time, `backface-visibility` doesn&#39;t help :(

Any idea?


  [1]: https://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome

3D CSS transform, jagged edges in Firefox

How can I reset CSS `transform` properties CSS `translate` value?

### Say I have:

&lt;!-- language: lang-css --&gt;

    div.someclass {
        -webkit-transform: translate3d(0, -50%, 0);
           -moz-transform: translate(0, -50%);
            -ms-transform: translate(0,- 50%);
             -o-transform: translate(0, -50%);
                transform: translate3d(0, -50%, 0);
    }

Then how do I clear all transformations/translations?


----------


**Should I use:** `translate(0, 0);` / `translate3d(0, 0, 0);` **or** `transform:auto;` ?

How to reset CSS3 *-transform: translate(…)?

Is it possible to apply a CC translate X and Y on the same element? 

If I try this the translateX is overridden by the translateY: 

    .something { 
            transform: translateX(-50%);
            transform: translateY(-50%);
    }

All Css Transforms Solutions on Gang of Coders

Total of 23 Css Transforms Solutions