Rectangle 27 32

Another solution for this without having to set a width for one of the elements is using the CSS3 transform attribute.

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

The trick ist, that translateX(-50%) sets the #inner element 50 percent to the left of its own width. You can use the same trick for vertical alignment.

Here's a Fiddle showing horizontal and vertical alignment.

-webkit-transform: translate(-50%,0); 	-moz-transform: translate(-50%,0); 	-ms-transform: translate(-50%,0); 	-khtml-transform: translate(-50%,0); 	-o-transform: translate(-50%,0);

html - How to horizontally center a
in another
? - Stack Ov...

html css alignment
Rectangle 27 32

Another solution for this without having to set a width for one of the elements is using the CSS3 transform attribute.

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

The trick ist, that translateX(-50%) sets the #inner element 50 percent to the left of its own width. You can use the same trick for vertical alignment.

Here's a Fiddle showing horizontal and vertical alignment.

-webkit-transform: translate(-50%,0); 	-moz-transform: translate(-50%,0); 	-ms-transform: translate(-50%,0); 	-khtml-transform: translate(-50%,0); 	-o-transform: translate(-50%,0);

html - How to horizontally center a
in another
? - Stack Ov...

html css alignment
Rectangle 27 32

Another solution for this without having to set a width for one of the elements is using the CSS3 transform attribute.

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

The trick ist, that translateX(-50%) sets the #inner element 50 percent to the left of its own width. You can use the same trick for vertical alignment.

Here's a Fiddle showing horizontal and vertical alignment.

-webkit-transform: translate(-50%,0); 	-moz-transform: translate(-50%,0); 	-ms-transform: translate(-50%,0); 	-khtml-transform: translate(-50%,0); 	-o-transform: translate(-50%,0);

html - How to horizontally center a
in another
? - Stack Ov...

html css alignment
Rectangle 27 2

I have container element which hold page with css3 animations. When the page completed the animation, the css3 property has value: transform: translate(0,0);. So, I just removed this line, and everything worked as it should - position: fixed is displayed properly. When css class is applied to translate the page, translate property is added and css3 animation worked as well.

.page {
     top: 50px;
     position: absolute;
     transition: ease 0.6s all;
     /* -webkit-transform: translate(0, 0); */
     /* transform: translate(0,0); */
 }
 .page.hide {
     -webkit-transform: translate(100%, 0);
     transform: translate(-100%, 0);    
 }

For me, it was the fact of having these styles on the wrapper containing the fixed element that was preventing the fixed one from being sticky: -webkit-perspective: 1000; -webkit-transform-style: preserve-3d; Took these off and everything works fine. They were questionable optimizations anyway!

Removing the transform, by any means, is probably the best workaround so far. Something like a fade-in, once complete, should be removable without affecting the appearance of the element. Actually, I'm not sure what having a transformX(0) hanging around would do to rendering performance, if anything at all; it could either be ignored, or could hurt performance, or could make it better by forcing some kind of 3D acceleration. Who knows. In any case, once an animation is complete, or even just before a fixed element is added to it, one can simply remove the CSS classes for the transform.

html - Positions fixed doesn't work when using -webkit-transform - Sta...

html css positioning rotation
Rectangle 27 2

I have container element which hold page with css3 animations. When the page completed the animation, the css3 property has value: transform: translate(0,0);. So, I just removed this line, and everything worked as it should - position: fixed is displayed properly. When css class is applied to translate the page, translate property is added and css3 animation worked as well.

.page {
     top: 50px;
     position: absolute;
     transition: ease 0.6s all;
     /* -webkit-transform: translate(0, 0); */
     /* transform: translate(0,0); */
 }
 .page.hide {
     -webkit-transform: translate(100%, 0);
     transform: translate(-100%, 0);    
 }

For me, it was the fact of having these styles on the wrapper containing the fixed element that was preventing the fixed one from being sticky: -webkit-perspective: 1000; -webkit-transform-style: preserve-3d; Took these off and everything works fine. They were questionable optimizations anyway!

Removing the transform, by any means, is probably the best workaround so far. Something like a fade-in, once complete, should be removable without affecting the appearance of the element. Actually, I'm not sure what having a transformX(0) hanging around would do to rendering performance, if anything at all; it could either be ignored, or could hurt performance, or could make it better by forcing some kind of 3D acceleration. Who knows. In any case, once an animation is complete, or even just before a fixed element is added to it, one can simply remove the CSS classes for the transform.

html - Positions fixed doesn't work when using -webkit-transform - Sta...

html css positioning rotation
Rectangle 27 3

Here's a 2015 update to this answer. I started using CSS3 transform to do my dirty work for positioning. This allows you to not have to make any extra HTML, you don't have to do math (finding half-widths of things) you can use it on any element!

What I do a lot these days is I will give a class to things I want centered and just re-use that class every time. For example:

<div class="bigDiv">
    <div class="smallDiv centerThis">
    </div>
</div>
.bigDiv {
    width:200px;
    height:200px;
    background-color:#efefef;
    position:relative;
}
.smallDiv {
    width:50px;
    height:50px;
    background-color:#cc0000;
}
.centerThis {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

This way, I will always be able to center something in it's container. You just have to make sure that the thing you want centered is in a container that has a position defined.

BTW: This works for centering BIGGER divs inside SMALLER divs as well.

Yes, it works only in IE9+

html - How to make an image center (vertically & horizontally) inside ...

html css
Rectangle 27 3

Here's a 2015 update to this answer. I started using CSS3 transform to do my dirty work for positioning. This allows you to not have to make any extra HTML, you don't have to do math (finding half-widths of things) you can use it on any element!

What I do a lot these days is I will give a class to things I want centered and just re-use that class every time. For example:

<div class="bigDiv">
    <div class="smallDiv centerThis">
    </div>
</div>
.bigDiv {
    width:200px;
    height:200px;
    background-color:#efefef;
    position:relative;
}
.smallDiv {
    width:50px;
    height:50px;
    background-color:#cc0000;
}
.centerThis {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

This way, I will always be able to center something in it's container. You just have to make sure that the thing you want centered is in a container that has a position defined.

BTW: This works for centering BIGGER divs inside SMALLER divs as well.

Yes, it works only in IE9+

html - How to make an image center (vertically & horizontally) inside ...

html css
Rectangle 27 3

Here's a 2015 update to this answer. I started using CSS3 transform to do my dirty work for positioning. This allows you to not have to make any extra HTML, you don't have to do math (finding half-widths of things) you can use it on any element!

What I do a lot these days is I will give a class to things I want centered and just re-use that class every time. For example:

<div class="bigDiv">
    <div class="smallDiv centerThis">
    </div>
</div>
.bigDiv {
    width:200px;
    height:200px;
    background-color:#efefef;
    position:relative;
}
.smallDiv {
    width:50px;
    height:50px;
    background-color:#cc0000;
}
.centerThis {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

This way, I will always be able to center something in it's container. You just have to make sure that the thing you want centered is in a container that has a position defined.

BTW: This works for centering BIGGER divs inside SMALLER divs as well.

Yes, it works only in IE9+

html - How to make an image center (vertically & horizontally) inside ...

html css
Rectangle 27 0

I added an extra div to each of the transformations and by setting fixed widths for those divs and clipping overflow I manged to make them the correct size. But then I had to use position: relative and top: blah; left: blah to shift the images into the correct position. http://jsfiddle.net/4b9BJ/7/

This looks like it worked. I attempted an inner div with adjusted fixed sizes based on the resulting images size, but did not adjust the top and left like this. Thanks!

@j0tt if you want to use javascript to dynamically zoom in and out of the image then you should be able to calculate the nessicary top: and left: values with just a few /2 or *2 as nessicary (maybe a subtraction and then a /2 in the case of rotation).

actually, you might be able to use % for the top: and left: values

css - overflow:auto does not work with CSS3 transformed child elements...

css html5 css3 css-transforms
Rectangle 27 0

You can now control the scaling by tweaking the font-size on #content-...

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Sandbox for Stack Overflow question http://stackoverflow.com/q/10627306/578288" />
<meta charset=utf-8 />
  <title>Sandbox for SO question about scaling an element both visually and dimensionally</title>
</head>
<body>

  <div id="wrapper">
    <div class="surrounding-content">
      before
    </div>

    <div id="content-to-scale">
      <div>something inside</div>
      <div><img src="http://placekitten.com/g/150/100"></div>
      <div>another something</div>
    </div>

    <div class="surrounding-content">
      after
    </div>
  </div>

</body>
</html>

The CSS (Still started from Rory's base)

body {
  font-size: 13px;
  background-color: #fff;
}
#wrapper {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  border: 0.07692307692307693em solid #888;
  padding: 1.1538461538461537em;
}
.surrounding-content {
  border: 0.07692307692307693em solid #eee;
}
#content-to-scale {
  border: 0.07692307692307693em solid #bbb;
  width: 10em;
}
#content-to-scale {
  font-size: 1.1em;
}
#content-to-scale img {
  width: auto;
  height: auto;
  min-width: 100%;
  max-width: 100%;
}

I'm using font size and ems to "scale" the dimensions of the child elements.

Ems are dimension units that are relative to the current context's font-size.

So if I say I have a font-size of 13px and a border of 1 (the desired border-width in pixels) divded by 13 (the current context's font-size also in pixels) = 0.07692307692307693em the browser ought to render a 1px border

To emulate a 15px padding I use the same formula, (desired pixels)/(current context's font-size in pixels) = desired ems. 15 / 13 = 1.1538461538461537em

To tame the scaling of the image I use an old favorite of mine: the natural ratio preserving scale, let me explain:

Images have a natural height and width and a ratio between them. Most browser's will preserve this ratio if both width and height are set to auto. You can then control the desired width with min-width and max-width, in this case making it always scale to the full width of the parent element, even when it will scale beyond it's natural width.

(You can also use max-width and max-height 100% to prevent the image from busting out of the borders of the parent element, but never scaling beyond their natural dimensions)

This does have some drawbacks: nested font-sizing in ems are applied recusively. Meaning if you have:

<style type="text/css">
    div{
        font-size: 16px;
    }
    span{
        font-size: 0.5em;
    }
</style>
<div>
    <span>
        <span>
            Text
        </span>
    </span>
</div>

You will end up with "Text" rendering at 4px instead of the 8px you might expect.

At first I thought you could fix the nested em problem by using the rem (root em) unit, but now I think that that would only work if youre scaling the whole page rem only notices font-size changes to the root html element.

what you said about em and image ratio might be quite correct, but how does this answer the question about transformation and keeping the transformed element still inside the outer surroundings?

@Anubhav Saini: The last line of the original question says that kanaka doesn't need to use CSS3 Transform, he just needs the scaling, and the desired effect of the scaled size dictating the width/height in layout. I would like to solve it with transforms but in my experience transforms do not have any affect on the layout/positioning of non-transformed elements.

will this break down if the user has a minimum font size set on their browser?

css - Scale/zoom a DOM element and the space it occupies using CSS3 tr...

css html5 css3 scale css-transforms
Rectangle 27 0

I believe this is the effect you're looking for: http://jsfiddle.net/8R4ym/108/

I believe the non-communicative operations are messing up your image. It matters in what order the skew and rotate are performed. "transform" seems to perform them from left to right (first rotate and then skew) and won't let you use the "transform" attribute twice in a single definition space. I couldn't find any way to change the order in which the operations are performed so I instead inserted another div so that skew would be performed before rotate the second time around. I hope this is what you're looking for.

Edit: I just noticed a small difference in text size. I think you might have to put in a hack to increase text size by some percentage.

Thank you Colm! I think I could simplify a bit, the key is in changing the order just as you pointed out: [link] jsfiddle.net/8R4ym/115

css3 - What is the reverse skew value when applying a CSS skew transfo...

css3 transform rotation reverse skew
Rectangle 27 0

Unfortunately this is not possible.

You roughly have two other options though:

  • Scale all the other elements, excluding the one you don't want to scale (but this won't scale the container).
  • Scale the container and re-scale the element you don't want to scale (but this will probably make it look blurry).
// Example 1.
span:not(:last-child) {
    display: inline-block; /* You can't scale inline elements */
    transform: scale(2);
}

// Example 2.
#parent{
    transform: scale(.5);
}

span:last-child{
    transform: scale(2);
}

css3 - CSS Transform scale, don't scale child element - Stack Overflow

css css3 transform
Rectangle 27 0

The way you form the hexagonal tiles is not good for applying animations with absolute positioned elements. I would recommend this way: http://jsfiddle.net/linmic/5aqSK/

what do you mean by the low quality?

But I figured it out. adding -webkit-transform: scale(1.00001); enables anti-aliasing on the edges to it looks smoother!

See this anti-aliasing technique in this fiddle: jsfiddle.net/jZMEy/4 versus the non-anti-aliased one here: jsfiddle.net/jZMEy

css - CSS3 Transformed elements lose their transform during transition...

css css3 css-transitions css-transforms
Rectangle 27 0

You can surely combine multiple animation, but not by combining CSS classes. See the first answer here : combining multiple css animations into one overall animation

The first part tells you how to combine animation with CSS with some parameters (delay, duration) :

But those are animations, not transitions.

This topic is about combining transform properties, transitions are not really the problem here.

No, they are all three completely different concepts. Transforms are animatable, which means animations and transitions can both work with transforms, but an animation and a transition can't contain each other.

I know, but the topic is about combining multiple transform properties. Animations can do that.

I tried animations first and encountered the same problem with transitions that the classes override each other. http://jsfiddle.net/9Eq5k/ Also trying to get the transition out effect with animations it causes the default animation to fire on page load so would need jquery/javascript to add the class after the first mouseout. Was hoping for a scriptless solution, but probably going to need to use javascript to edit the css to achieve what I want anyway.

css3 - CSS Element with multiple transform classes? - Stack Overflow

css css3 css-transforms
Rectangle 27 0

This is a known issue with Macintosh text rendering on Chrome 22 (and apparently Safari). GPU acceleration causes MacOS to switch from subpixel to greyscale antialiasing which makes the font weight appear to decrease noticeably.

As the OP notes below, the fix is to apply webkit-font-smoothing: antialiased - which applies greyscale antialiasing at all times. If you do this, you'll probably want to increase your font-weights all around since greyscale antialiased text looks notably thinner than sub-pixel

Thanks dude found what I was looking for. For those of you that end up here from the googlesphere : -webkit-font-smoothing: antialiased; seems to resolved the issue.

Probably worth noting that setting -webkit-font-smoothing: subpixel-antialiased; will achieve the same thing without causing the type to appear thinner.

-webkit-font-smoothing: antialiased

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

css transitions - CSS3 Transform affecting other elements with chrome/...

css3 css-transitions flicker css-transforms
Rectangle 27 0

I found a workaround: -webkit-backface-visibility: hidden; I add this property on image wrapper class ".column-img-wrap" and the image class ".column-img" and it works perfectly !

.column-img-wrap {
  margin: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
}

.column-img {
  display: block;
  max-width: 100%;
  transform: scale(1);
  transition: transform .3s ease;
  -webkit-backface-visibility: hidden;
}

css3 - CSS 3 animation "transform: scale" on column element doesn't wo...

css css3 google-chrome multiple-columns
Rectangle 27 0

The solution for me was to apply the bellow css to the parent of all affected elements.

css transitions - CSS3 Transform affecting other elements with chrome/...

css3 css-transitions flicker css-transforms
Rectangle 27 0

The 'SOLUTION' seems to be not abusing css3 'transform'. In my case i was using flexslider with custom extra css navigation elements with opacity and hover animations like the < > flexslider arrows. This extra elements where causing too much work for the retina iPad gpu (apple bad design?) so i set some elements static, always visible plus no opacity, no animation,. even simplified removing some elements. This prevented ipad crashing much less than before. Still not 100% solved, but as I said, the problem seems to be a weak graphics card for a retina display like the iPad uses.

Also it seems to be some of the CSS involved that iOs doesn't like...

.flexslider .slides > li {
        display: none;
        -webkit-backface-visibility: hidden;
    }

The problem seems to be an incorrect implementation of the CSS3 transform property in iPad and mobile retina devices/bad apple hardware design.

Note that link-only answers are discouraged, SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference.

jquery - How can I stop flexslider slideshow from crashing on iPad due...

jquery ipad memory slideshow flexslider
Rectangle 27 0

I have container element which hold page with css3 animations. When the page completed the animation, the css3 property has value: transform: translate(0,0);. So, I just removed this line, and everything worked as it should - position: fixed is displayed properly. When css class is applied to translate the page, translate property is added and css3 animation worked as well.

.page {
     top: 50px;
     position: absolute;
     transition: ease 0.6s all;
     /* -webkit-transform: translate(0, 0); */
     /* transform: translate(0,0); */
 }
 .page.hide {
     -webkit-transform: translate(100%, 0);
     transform: translate(-100%, 0);    
 }

For me, it was the fact of having these styles on the wrapper containing the fixed element that was preventing the fixed one from being sticky: -webkit-perspective: 1000; -webkit-transform-style: preserve-3d; Took these off and everything works fine. They were questionable optimizations anyway!

html - Positions fixed doesn't work when using -webkit-transform - Sta...

html css positioning rotation