Css Transform In World/screen Space

If I have two nested elements, lets say:

Foo

and I apply a rotation to the outside element, lets say r

Solution 1:

I am not 100% clear on what your actual code looks like, but in the case where you want to both rotate and translate an object down a page you may want to consider moving the object before the rotation.

HTML

<div id="outside">
    <div id="inside">Fooooooooooooo</div>
</div>

CSS

#inside{
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */transform: rotate(45deg);
    color: red;
    width: 100px;
    height: 30px;
    border: 1px solid black;
}

#outside{
    -ms-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    transform: translateY(200px);
}

JSFiddle

Let me know if your page structure does not work with this solution.