Is it possible to animate (using transitions) only one type of css transform?

I have css:

    cell{
      transform: scale(2) translate(100px, 200px);
      transition: All 0.25s;  
    }

Now, I want only scale to be animated.
In this case I could use position:absolute and left/right properties but I far as I remember, translate() is much better in performance.
I would also like to avoid using additional html elements.

Fiddle: http://jsfiddle.net/6UE28/2/

CSS Transition for only one type of transform?

i try to use style.transform attribute
but i can&#39;t make the transform, there is not so many doc , crying ...

[![enter image description here][1]][1]


  [1]: http://i.stack.imgur.com/itD0C.jpg

here is the css3 code:

    

&gt; transform: translateZ(-100px) translateX(-24%) translateY(0)
&gt; rotateY(60deg);

How to make this transform with React-Native?

I want to detect **where** a `MouseEvent` has occurred, in **coordinates relative to the clicked element**. Why? Because I want to add an absolutely positioned child element at the clicked location.

I know how to detect it when no CSS3 transformations exist (see description below). However, when I add a CSS3 Transform, then my algorithm breaks, and I don&#39;t know how to fix it.

I&#39;m not using any JavaScript library, and I want to understand how things work in plain JavaScript. So, please, don&#39;t answer with &quot;just use jQuery&quot;.

By the way, I want a solution that works for all MouseEvents, not just &quot;click&quot;. Not that it matters, because I believe all mouse events share the same properties, thus the same solution should work for all of them.

----

## Background information

According to [DOM Level 2 specification][2], a [`MouseEvent`][1] has few properties related to getting the event coordinates:

* `screenX` and `screenY` return the screen coordinates (the origin is the top-left corner of user&#39;s monitor)
* `clientX` and `clientY` return the coordinates relative the document viewport.

Thus, in order to find the position of the `MouseEvent` relative to the clicked element content, I must do this math:

    ev.clientX - this.getBoundingClientRect().left - this.clientLeft + this.scrollLeft

* `ev.clientX` is the coordinate relative to the document viewport
* `this.getBoundingClientRect().left` is the position of the element relative to the document viewport
* `this.clientLeft` is the amount of border (and scrollbar) between the element boundary and the inner coordinates
* `this.scrollLeft` is the amount of scrolling inside the element

[`getBoundingClientRect()`][3], [`clientLeft`][4] and [`scrollLeft`][5] are specified at [CSSOM View Module][6].

## Experiment without CSS Transform (it works)

Confusing? [Try the following piece of JavaScript and HTML][jsfiddle]. Upon clicking, a red dot should appear exactly where the click has happened. This version is &quot;quite simple&quot; and works as expected.

    function click_handler(ev) {
        var rect = this.getBoundingClientRect();
        var left = ev.clientX - rect.left - this.clientLeft + this.scrollLeft;
        var top = ev.clientY - rect.top - this.clientTop + this.scrollTop;
    
        var dot = document.createElement(&#39;div&#39;);
        dot.setAttribute(&#39;style&#39;, &#39;position:absolute; width: 2px; height: 2px; top: &#39;+top+&#39;px; left: &#39;+left+&#39;px; background: red;&#39;);
        this.appendChild(dot);
    }
    
    document.getElementById(&quot;experiment&quot;).addEventListener(&#39;click&#39;, click_handler, false);

    &lt;div id=&quot;experiment&quot; style=&quot;border: 5px inset #AAA; background: #CCC; height: 400px; position: relative; overflow: auto;&quot;&gt;
        &lt;div style=&quot;width: 900px; height: 2px;&quot;&gt;&lt;/div&gt; 
        &lt;div style=&quot;height: 900px; width: 2px;&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

## Experiment adding a CSS Transform (it fails)

Now, [try adding a CSS `transform`][jsfiddle2]:

    #experiment {
        transform: scale(0.5);
        -moz-transform: scale(0.5);
        -o-transform: scale(0.5);
        -webkit-transform: scale(0.5);
        /* Note that this is a very simple transformation. */
        /* Remember to also think about more complex ones, as described below. */
    }

The algorithm doesn&#39;t know about the transformations, and thus calculates a wrong position. What&#39;s more, the results are different between Firefox 3.6 and Chrome 12. Opera 11.50 behaves just like Chrome.

In this example, the only transformation was scaling, so I could multiply the scaling factor to calculate the correct coordinate. However, if we think about arbitrary transformations (scale, rotate, skew, translate, matrix), and even nested transformations (a transformed element inside another transformed element), then we really need a better way to calculate the coordinates.


[1]: https://developer.mozilla.org/en/DOM/Event/UIEvent/MouseEvent
[2]: http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-eventgroupings-mouseevents
[3]: https://developer.mozilla.org/en/DOM/element.getBoundingClientRect
[4]: https://developer.mozilla.org/en/DOM/element.clientLeft
[5]: https://developer.mozilla.org/en/DOM/element.scrollLeft
[6]: http://www.w3.org/TR/cssom-view/#extensions-to-the-element-interface
[jsfiddle]: http://jsfiddle.net/7CKyT/5/
[jsfiddle2]: http://jsfiddle.net/7CKyT/6/


How to get the MouseEvent coordinates for an element that has CSS3 Transform?

I have CSS style for a layer:

    .element {
        -webkit-transform: rotate(7.5deg);    
         -moz-transform: rotate(7.5deg);    
          -ms-transform: rotate(7.5deg);    
           -o-transform: rotate(7.5deg);   
              transform: rotate(7.5deg);
    }

Is there a way to get curent rotation value through jQuery?

I tried this

    $(&#39;.element&#39;).css(&quot;-moz-transform&quot;)

The result is `matrix(0.991445, 0.130526, -0.130526, 0.991445, 0px, 0px)` which doesn&#39;t tell me a lot. What I&#39;m looking to get is `7.5`.

Get element -moz-transform:rotate value in jQuery

I have some IIS rewrite rules that I want to vary by environment. The development rewrite rules are in the web.config file, then at the end of the web.test.config file I have:

    

        &lt;appSettings&gt;
             ...Some app settings tranforms here
        &lt;/appSettings&gt;
        &lt;system.webserver&gt;
                &lt;rewrite xdt:Transform=&quot;Replace&quot;&gt;
                  &lt;rules&gt;
                    ... rules here
                  &lt;/rules&gt;
                &lt;/rewrite&gt;
              &lt;/system.webserver&gt;
            &lt;/configuration&gt;

My app settings are getting transformed when I deploy to test, but by IIS rewrite rules are not. I was hoping the entire `&lt;rewrite&gt;` section would simply be replaced with the one in the transform file (as per http://msdn.microsoft.com/en-us/library/dd465326.aspx), but nothing is changing.

I have tried putting `xdt:Transform=&quot;Replace&quot; xdt:Locator=&quot;Match(name)&quot;&gt;` on the individual rules too:

    &lt;rule name=&quot;Test rule&quot; stopProcessing=&quot;true&quot; xdt:Transform=&quot;Replace&quot; xdt:Locator=&quot;Match(name)&quot;&gt;

But again this makes no difference.

Is it even possible to replace rewrite rules in the web.config and if so, what am I missing?


Replacing IIS rewrite rules in web.config transform

I have been struggling with this for a while, and can&#39;t seem to find an answer (that works) anywhere. I have an SVG file which looks like this:

    &lt;svg
    
       xmlns:dc=&quot;http://purl.org/dc/elements/1.1/&quot;
       ...
       width=&quot;72.9375&quot;
       height=&quot;58.21875&quot;
       ...&gt;
       ...
       &lt;g
         ...
         transform=&quot;translate(10.75,-308.96875)&quot;
         style=&quot;...&quot;&gt;
         &lt;path
           inkscape:connector-curvature=&quot;0&quot;
           d=&quot;m -10.254587,345.43597 c 0,-1.41732 0.17692,-2.85384 0.5312502,-3.5625 0.70866,-1.41733 2.14518,-2.82259 3.5625,-3.53125 1.41733,-0.70866 2.11392,-0.70867 3.53125,0 1.41732,0.70866 ... z&quot;
           ... /&gt;
      &lt;/g&gt;
    &lt;/svg&gt;

I want to remove the `transform=&quot;...&quot;` line but still have my image stay where I&#39;ve placed it (in InkScape). If I manually remove the transform, the image zips to another part of the screen (as expected), but I need to get rid of the transform altogether and, at the same time, have the image stay exactly where I want it. Is there a way to remove/flatten the transforms into the path coordinates themselves? (The only transforms I have to deal with are translate and scale, no matrices.)

Removing transforms in SVG files

I&#39;ve been using CSS3 transform to rotate images and textboxes with borders in my website.

The problem is that the border look jagged in Chrome, like a (low-resolution) game without Anti-Aliasing. In IE, Opera and FF it looks much better because AA is used (which is still clearly visible but not that bad). I can&#39;t test Safari because I don&#39;t own a Mac.

The rotated photo and text itself look fine, it is only the border that looks jagged.

The CSS I use is this:

	.rotate2deg {
		transform: rotate(2deg);
		-ms-transform: rotate(2deg); /* IE 9 */
		-webkit-transform: rotate(2deg); /* Safari and Chrome */
		-o-transform: rotate(2deg); /* Opera */
		-moz-transform: rotate(2deg); /* Firefox */
	}

Is there any way I can fix this, e.g. by forcing Chrome to use AA?

Example below:

![Jagged Edges example][1]


  [1]: http://i.stack.imgur.com/PE8Vq.png

css transform, jagged edges in chrome

Seems like there has been a recent update to Google Chrome that causes blurry text after doing a `transform: scale()`. Specifically I&#39;m doing this:

   


&lt;!-- language: lang-css --&gt;

    @-webkit-keyframes bounceIn {
      0% {
        opacity: 0;
        -webkit-transform: scale(.3);
      }

      50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
      }

      70% {
        -webkit-transform: scale(.9);
      }

      100% {
        -webkit-transform: scale(1);
      }
    }


If you visit http://rourkery.com in Chrome, you should see the problem on the main text area. It didn&#39;t used to do this and it doesn&#39;t seem to effect other webkit browsers (like Safari). There were some other posts about people experiencing a similar issue with 3d transforms, but can&#39;t find anything about 2d transforms like this.

Any ideas would be appreciated, thanks!

Blurry text after using CSS transform: scale(); in Chrome

I&#39;m using Java&#39;s built in XML transformer to take a DOM document and print out the resulting XML. The problem is that it isn&#39;t indenting the text at all despite having set the parameter &quot;indent&quot; explicitly.

sample code

    public class TestXML {
     
     public static void main(String args[]) throws Exception {
      ByteArrayOutputStream s;
      
      Document d = DocumentBuilderFactory.newInstance().newDocumentBuilder().newDocument();
      Transformer t = TransformerFactory.newInstance().newTransformer();
      
      Element a,b;
      
      a = d.createElement(&quot;a&quot;);
      b = d.createElement(&quot;b&quot;);
      
      a.appendChild(b);
      
      d.appendChild(a);
      
      t.setParameter(OutputKeys.INDENT, &quot;yes&quot;);
      
      s = new ByteArrayOutputStream();
      
      t.transform(new DOMSource(d),new StreamResult(s));
      
      System.out.println(new String(s.toByteArray()));
      
     }
    }

result

    &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;no&quot;?&gt;&lt;a&gt;&lt;b/&gt;&lt;/a&gt;

desired result

    &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;no&quot;?&gt;
    &lt;a&gt;
     &lt;b/&gt;
    &lt;/a&gt;

Thoughts?

Java: How to Indent XML Generated by Transformer

I am trying to replicate an Apple style activity indicator (sundial loading icon) by using a PNG and CSS3 animation. I have the image rotating and doing it continuously, but there seems to be a delay after the animation has finished before it does the next rotation.

    @-webkit-keyframes rotate {
      from {
        -webkit-transform: rotate(0deg);
      }
      to { 
        -webkit-transform: rotate(360deg);
      }
    }
    #loading img
    {
    	-webkit-animation-name: 			rotate; 
    	-webkit-animation-duration: 		0.5s; 
    	-webkit-animation-iteration-count:	infinite;
    	-webkit-transition-timing-function:	linear;
    	}

I have tried changing the animation duration but it makes no difference, if you slow it right down say 5s its just more apparent that after the first rotation there is a pause before it rotates again. It&#39;s this pause I want to get rid of.

Any help is much appreciated, thanks.

CSS3 Continuous Rotate Animation (Just like a loading sundial)

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 have two absolutely positioned div elements that overlap. Both have set z-index values via css. I use the `translate3d` webkit transform to animate these elements off the screen, and then back onto the screen. After the transform, the elements no longer respect their set `z-index` values.

Can anyone explain what happens to the z-index / stack-order of the div elements once I do a webkit transform on them? And explain what I can do to keep the stack-order of the div elements?

Here is some more information on how I am doing the transform.

Before the transform, each element gets these two webkit transition values set via css (I am using jQuery to do the `.css()` function calls:

    element.css({ &#39;-webkit-transition-duration&#39;: duration + &#39;s&#39; });
    element.css({ &#39;-webkit-transition-property&#39;: &#39;-webkit-transform&#39; });

The element is then animated using the translate3d -webkit-transform:

    element.css({ &#39;-webkit-transform&#39;: &#39;translate3d(&#39; + hwDelta + &#39;px, 0, -1px)&#39; });

Btw, I have tried setting the 3rd parameter of `translate3d` to several different values to try to replicate the stack-order in the 3d space, but to no luck.

Also, iPhone/iPad and Android browsers are my target browser that this code needs to run on. Both support webkit transitions.


css z-index lost after webkit transform translate3d

Using transform property, z-index is canceled and appeared in the front.
(When commenting out -webkit-transform, z-index is properly working in below code)

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .test {
      width: 150px;
      height: 40px;
      margin: 30px;
      line-height: 40px;
      position: relative;
      background: white;
      -webkit-transform: rotate(10deg);
    }

    .test:after {
      width: 100px;
      height: 35px;
      content: &quot;&quot;;
      position: absolute;
      top: 0;
      right: 2px;
      -webkit-box-shadow: 0 5px 5px #999;
      /* Safari and Chrome */
      -webkit-transform: rotate(3deg);
      /* Safari and Chrome */
      transform: rotate(3deg);
      z-index: -1;
    }

&lt;!-- language: lang-html --&gt;

    &lt;html&gt;

    &lt;head&gt;
      &lt;title&gt;transform&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;transformtest.css&quot;&gt;
    &lt;/head&gt;

    &lt;body&gt;
      &lt;div class=&quot;test&quot;&gt;z-index is canceled.&lt;/div&gt;
    &lt;/body&gt;

    &lt;/html&gt;

&lt;!-- end snippet --&gt;

How do transform and z-index work together?

z-index is canceled by setting transform(rotate)

I added an existing ASP.Net web application project to my solution. In addition to the standard debug and release configurations this solution also has two custom configurations, SAT and UAT. For the new web application right clicking on Web.Config shows the context menu but the option for &quot;Add Config Transform&quot; is grayed out.

I&#39;m at a loss. The new project is a web application. The Configuration Manager does not show the two custom configurations for this project but it does for the other projects. The project appears to have the correct entries in the solution file.

Thoughts?



ASP.Net Web Application Add Config Transform Grayed Out

I want to center my `div` and I use this method, but it makes my texts inside the `div` blurry:


    
    &lt;!-- language: lang-css --&gt;

    #div {
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }



is there any way to center my `div`?


CSS: transform: translate(-50%, -50%) makes texts blurry

How would I rotate an element with a jQuery&#39;s `.animate()`? I&#39;m using the line below, which is currently animating the opacity correctly, but does this support CSS3 transforms?

    $(element).animate({
       opacity: 0.25,
       MozTransform: &#39;rotate(-&#39; + -amount + &#39;deg)&#39;,
       transform: &#39;rotate(&#39; + -amount + &#39;deg)&#39;
    });

Animate element transform rotate

I am new to d3 and svg coding and am looking for a way to rotate text on the xAxis of a chart. My problem is that typically the xAxis titles are longer than the bars in the bar chart are wide. So I&#39;m looking to rotate the text to run vertically (rather than horizontally) beneath the xAxis. 

I&#39;ve tried adding the transform attribute: 
.attr(&quot;transform&quot;, &quot;rotate(180)&quot;)

But when I do that, the text disappears altogether. I&#39;ve tried increasing the height of the svg canvas, but still was unable to view the text. 

Any thoughts on what I&#39;m doing wrong would be great. Do I need to also adjust the x and y positions? And, if so, by how much (hard to troubleshoot when I can see it in Firebug).


rotate x axis text in d3

Does anybody know how to generate a [JSON schema][1] from a existing XML schema (XSD file)?
Are there any tools available for this?



  [1]: http://json-schema.org/

Generate Json schema from XML schema (XSD)

Im trying to flip an image to display it 4 ways : original (no changes), flipped horizontally, flipped vertically, flipped horizontally + verticly. 

To do this Im doing the below, it works fine apart from the flip horizontally + vertically, any idea why this wouldnt be working ?

Ive made a JS fiddle of the issue here : https://jsfiddle.net/7vg2tn83/

    .img-hor {
            -moz-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
            filter: FlipH;
            -ms-filter: &quot;FlipH&quot;;
    }
    
    .img-vert {
            -moz-transform: scaleY(-1);
            -o-transform: scaleY(-1);
            -webkit-transform: scaleY(-1);
            transform: scaleY(-1);
            filter: FlipV;
            -ms-filter: &quot;FlipV&quot;;
    }
    
    .img-hor-vert {
            -moz-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
            filter: FlipH;
            -ms-filter: &quot;FlipH&quot;;
        
            -moz-transform: scaleY(-1);
            -o-transform: scaleY(-1);
            -webkit-transform: scaleY(-1);
            transform: scaleY(-1);
            filter: FlipV;
            -ms-filter: &quot;FlipV&quot;;
    }

Flip / mirror an image horizontally + vertically with css

&gt; **Second update:** Looks like one of my functions (resetFigures) was preventing the event handler, so moving that to the end of the bind function sorted it out.
&gt;
&gt; **Update:** I realized after some basic testing that the click events were registering, it&#39;s just that the box fails to flip when tapped.

I have the basic aesthetic functionality of my site working in Chrome and Firefox, but it refuses to behave properly on iOS (test on iPhone 4 with iOS 6.1 and iPad with iOS 4.3.5).

You can view the site and of course the scripts (main.js) here: http://bos.rggwebdesigns.com/

I&#39;ve read that iOS doesn&#39;t really handle jQuery click events properly, but I&#39;m struggling to figure out a fix. A couple threads here on Stack Overflow mentioned the live() method, but implementing it like follows (as well as adding `onclick=&quot;&quot;` to the clickable elements) didn&#39;t seem to work:

    $(&#39;.card&#39;).live(&#39;click touchstart&#39;, function() {
            var figure = $(this).children(&#39;.back&#39;);
            var button = figure.find(&#39;.button&#39;);
            var column = $(this).parents().eq(1);
            $(&#39;.column&#39;).removeAttr(&#39;style&#39;);
            column.css(&#39;z-index&#39;, 2000);
            resetFigures();
            if(flipCard(this)){
                swoosh.pause();
                swoosh.currentTime = 0;
                swoosh.play();
            }
        });

I also came across this interesting workaround project: http://aanandprasad.com/articles/jquery-tappable/. 
However, I had no luck with that either:

    $(&#39;.card&#39;).tappable(function() {
            var figure = $(this).children(&#39;.back&#39;);
            var button = figure.find(&#39;.button&#39;);
            var column = $(this).parents().eq(1);
            $(&#39;.column&#39;).removeAttr(&#39;style&#39;);
            column.css(&#39;z-index&#39;, 2000);
            resetFigures();
            if(flipCard(this)){
                swoosh.pause();
                swoosh.currentTime = 0;
                swoosh.play();
            }
        });

Also, please correct me if I&#39;ve been mislead, but according to this site, 3D transforms are supported in iOS with the appropriate prefixes: http://caniuse.com/transforms3d

jQuery click events not working in iOS

Rotation is a style transform and in RN, you can rotate things like this

      render() {
        return (
          &lt;View style={{transform:[{rotate: &#39;10 deg&#39;}]}}&gt;
            &lt;Image source={require(&#39;./logo.png&#39;)} /&gt;
          &lt;/View&gt;
        );
      }

However, to animate things in RN, you have to use numbers, not strings.  Can you still animate transforms in RN or do I have to come up with some kind of sprite sheet and change the Image src at some fps?

React Native: How do you animate the rotation of an Image?

Working with CSS3 property `transform: scale`, I found interesting issue. I wanted to make a little zoom effect for pictures. But when I used for the parent div `overflow: hidden` and `border-radius`, the child div extended the beyond of parent div.

**Update:**

Problem isn&#39;t solved. If I add `transition`, is still doesn&#39;t work. I tried to solve this issue, but without success.

Here is a [**demo**][1]

  [1]: http://jsfiddle.net/qWdf6/3/

Bug with transform: scale and overflow: hidden in Chrome

I would like to apply multiple transforms to a `UIView` (or subclass of `UIView`), such as translate, rotate, and scale. I know that two transforms can be applied with [`CGAffineTransformConcat`][1], but how do I do it if I have three or more transforms?

I have seen these questions:

- https://stackoverflow.com/questions/1111277/applying-multiple-transforms-to-a-uiview-calayer
- https://stackoverflow.com/questions/6047972/using-multiple-cgaffinetransforms-on-text-matrix

but these questions are asking something different, and the given answers just talk about applying two transforms with `CGAffineTransformConcat`. Also, they use Objective-C rather than Swift.


  [1]: https://developer.apple.com/library/mac/documentation/GraphicsImaging/Reference/CGAffineTransform/#//apple_ref/c/func/CGAffineTransformConcat

How to apply multiple transforms in Swift

The following style is just an example of how to set transitions in CSS3. &lt;br/&gt; Is there a pure CSS trick to make this play in loop?

    div {
        width:100px;
        height:100px;
        background:red;
        transition:width 0.1s;
        -webkit-transition:width 0.1s; /* Safari and Chrome */
        -moz-transition:width 0.1s; /* Firefox 4 */
        -o-transition:width 0.1s; /* Opera */
        transition:width 0.1s; /* Opera */
    }

    div:hover {
        width:300px;
    }

All Transform Solutions on Gang of Coders

Total of 24 Transform Solutions