Stack Overflow
Stack Overflow

Questions tagged [transform]

Coordinate and other transformations. You probably want a more specific tag like [css-transforms].

This tag is about transformations:

  • Mostly coordinate transformations like shearing, skewing, translation, rotation and so on.
  • Document transformation like with XSLT.
  • Lots of other kind of data transformations.

There is also the css-specific , the xml-specific , and many others.

5924 questions
241
votes
27 answers

Removing transforms in SVG files

I have been struggling with this for a while, and can't seem to find an answer (that works) anywhere. I have an SVG file which looks like this:
Ephemera
  • 8,672
  • 8
  • 44
  • 84
204
votes
13 answers

css transform, jagged edges in chrome

I'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…
dtech
  • 13,741
  • 11
  • 48
  • 73
173
votes
38 answers

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

Seems like there has been a recent update to Google Chrome that causes blurry text after doing a transform: scale(). Specifically I'm doing this: @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { …
Ryan O'Rourke
  • 1,731
  • 2
  • 11
  • 3
126
votes
4 answers

Rotate and translate

I'm having some problems rotating and positioning a line of text. Now it's just position that works. The rotation also works, but only if I disable the positioning. CSS: #rotatedtext { transform-origin: left; transform: rotate(90deg); …
Sera
  • 1,367
  • 2
  • 8
  • 8
125
votes
7 answers

Java: How to Indent XML Generated by Transformer

I'm using Java's built in XML transformer to take a DOM document and print out the resulting XML. The problem is that it isn't indenting the text at all despite having set the parameter "indent" explicitly. sample code public class TestXML { …
Mike
  • 58,961
  • 76
  • 175
  • 221
121
votes
6 answers

CSS3 Continuous Rotate Animation (Just like a loading sundial)

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…
Gcoop
  • 3,372
  • 4
  • 26
  • 35
115
votes
7 answers

z-index is canceled by setting transform(rotate)

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) .test { width: 150px; height: 40px; margin: 30px; line-height: 40px; …
kbth
  • 1,155
  • 2
  • 8
  • 7
106
votes
8 answers

css z-index lost after webkit transform translate3d

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…
Rafe
  • 8,467
  • 8
  • 47
  • 67
96
votes
7 answers

ASP.Net Web Application Add Config Transform Grayed Out

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…
paulv7260
  • 993
  • 1
  • 7
  • 7
92
votes
4 answers

Flip / mirror an image horizontally + vertically with css

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…
sam
  • 9,486
  • 36
  • 109
  • 160
89
votes
1 answer

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

I want to center my div and I use this method, but it makes my texts inside the div blurry: #div { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } is there any…
Ken Avila
  • 1,091
  • 1
  • 8
  • 10
85
votes
7 answers

Animate element transform rotate

How would I rotate an element with a jQuery's .animate()? I'm using the line below, which is currently animating the opacity correctly, but does this support CSS3 transforms? $(element).animate({ opacity: 0.25, MozTransform: 'rotate(-' +…
kalpaitch
  • 5,193
  • 10
  • 43
  • 67
85
votes
5 answers

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

Rotation is a style transform and in RN, you can rotate things like this render() { return ( ); } However, to animate…
sdfsdf
  • 5,052
  • 9
  • 42
  • 75
85
votes
3 answers

rotate x axis text in d3

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'm looking to rotate the text to run vertically…
jschlereth
  • 1,071
  • 2
  • 10
  • 12
82
votes
5 answers

Generate Json schema from XML schema (XSD)

Does anybody know how to generate a JSON schema from a existing XML schema (XSD file)? Are there any tools available for this?
JB Hurteaux
  • 4,428
  • 6
  • 32
  • 35
1
2 3
…
99 100