Rotate and Translate

Rotate and translate

The reason is because you are using the transform property twice. Due to CSS rules with the cascade, the last declaration wins if they have the same specificity. As both transform declarations are in the same rule set, this is the case.

What it is doing is this:

1. rotate the text 90 degrees. Ok.
2. translate 50% by 50%. Ok, this is same property as step one, so do this step and ignore step 1.

See http://jsfiddle.net/Lx76Y/ and open it in the debugger to see the first declaration overwritten

As the translate is overwriting the rotate, you have to combine them in the same declaration instead: http://jsfiddle.net/Lx76Y/1/

To do this you use a space separated list of transforms:

#rotatedtext {
    transform-origin: left;
    transform: translate(50%, 50%) rotate(90deg) ;
}

Remember that they are specified in a chain, so the translate is applied first, then the rotate after that.

SVG mutltiple transform - rotate then translate horizontally

If you want the rotate to happen first, you have to put that last in your transform attribute.

<g transform="translate(100 0) rotate(30 50 50)">
   <rect x="0" y="0" fill="blue" width="100" height="100" />
</g>

Why? Because the above snippet is equivalent to

<g transform="translate(100 0)">
   <g transform="rotate(30 50 50)">
      <rect x="0" y="0" fill="blue" width="100" height="100" />
   </g>
</g>

You can think of transforms as happening from the inside out. The rectangle is affected by the inner rotate transform before the outer translate transform.

Or to think of it another way, the outer transform creates a new coordinate system that is shifted 100 to the right. Within that there is a separate coordinate system that is rotated 30 degrees. Into that the rectangle is drawn.

transform translate rotate order

Hope this helps

consider the two transform orders:

1. transform: translateX(value px) rotateY(value deg);

In this case rotateY is done first and then translateX,and you get a broken cube because of transform-origin property.If you remove this it will be perfect.

when the transform-origin property is applied to a translate transform
function that there is no apparent visual difference in the outcome.
This is because the element impacted by the transform is moved without
changing it’s shape, size, or rotation.

.wrap {  display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;  -webkit-box-pack: center;  -webkit-justify-content: center;      -ms-flex-pack: center;          justify-content: center;  -webkit-box-align: center;  -webkit-align-items: center;      -ms-flex-align: center;          align-items: center;  -webkit-perspective: 800px;          perspective: 800px;  -webkit-perspective-origin: 50%  100px;          perspective-origin: 50%  100px;  margin-top: 150px;}
.cube {  position: relative;  width: 200px;  -webkit-transform-style: preserve-3d;          transform-style: preserve-3d;  -webkit-animation: spin 10s linear infinite;          animation: spin 10s linear infinite;}
.cube div {  position: absolute;  width: 200px;  height: 200px;  text-align: center;  color: #66cc00;  background: pink;}
.cube .back {  -webkit-transform: translateZ(-100px) rotateY(180deg);          transform: translateZ(-100px) rotateY(180deg);}
.cube .front {  -webkit-transform: translateZ(100px);          transform: translateZ(100px);}
.cube .right {  -webkit-transform: translateX(100px) rotateY(-270deg);          transform: translateX(100px) rotateY(-270deg);}
.cube .left {  -webkit-transform: translateX(-100px) rotateY(270deg);          transform: translateX(-100px) rotateY(270deg);}
.cube .top {  -webkit-transform: translateY(-100px) rotateX(-90deg);          transform: translateY(-100px) rotateX(-90deg);}
.cube .bottom {  -webkit-transform: translateY(100px) rotateX(90deg);          transform: translateY(100px) rotateX(90deg);}
@-webkit-keyframes spin {  from {    -webkit-transform: rotateY(0);            transform: rotateY(0);  }  to {    -webkit-transform: rotateY(360deg);            transform: rotateY(360deg);  }}
@keyframes spin {  from {    -webkit-transform: rotateY(0);            transform: rotateY(0);  }  to {    -webkit-transform: rotateY(360deg);            transform: rotateY(360deg);  }}

    <div class="wrap">      <div class="cube">        <div class="front">front</div>        <div class="back">back</div>        <div class="top">top</div>        <div class="bottom">bottom</div>        <div class="left">left</div>        <div class="right">right</div>      </div>    </div>

css animation rotate and translate doesn't work together

The correct way to apply multiple transforms is to simply place them all in one transform property, with each transform separated by a space:

@keyframes slideIn {
  0%, 100% {
    transform: translate(10px) rotate(0deg);
    color: red;
  }
  25% {
    transform: translate(125px) rotate(360deg);
    color: green;
  }
}

Updated codepen

Rotate animation and translate?

The issue is that the transform in the animation is overriding the default transform:translate. In this case, you can combine them in the animation itself but it has to be hard coded

@keyframes rotating {
    from{
        transform: translate(-50%,-50%) rotate(0deg);    
    }
    to{
        transform: translate(-50%,-50%) rotate(360deg);  
    }
}

If you need it to be dynamic, you can nest it in an element and animate one while not affecting the other - most likely translate the parent and rotate the child.

If you absolutely cannot have more than one element, you can affect the transform matrix for the element using JavaScript, in which case using an animation library like GSAP would be advantageous.

---

Related Topics