trasnlate-and-fixed-property

combine translate property with position" fixed"

by daFalk

HTML

<div class="not-translated-anymore">
    <div class="content">
        	I'm translated on X-Axis with -50% 
    </div>
    <div class="content fixedElement">
      I'm not translated but fixed! :)
    </div>
</div>

CSS

body {
    overflow-x: hidden;
}
.not-translated-anymore {
    top: 50px;
    position: absolute;
    /* -webkit-transform: translate(0, 0); */
    /* transform: translate(0,0); */
}

.content {
    -webkit-transform: translate(50%, 0);
    transform: translate(-50%, 0);
}

.fixedElement {
    position: fixed;
    width: 100px;
    height: 100px;
    top: 0px;
    right: 0px;
    background: gray;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}