[Solved] Rotate and preserve 3d not working

[Alesso05]

The animation is working but the #sun rotate not with preserve 3d if stop the animation the rotate and preserve 3d work. How to make to work the animation and all rotations ?

Html:

<div class="holder">
     <div class="system">
         <img src="image/sun.png"class="objects" id="sun">
    </div></div>

Css:

.holder{width:40%;height:50%;margin-left:10%;margin-top:10%;position:relative;
        -ms-transform:rotateX(75deg);
     -moz-transform:rotateX(75deg);
     -webkit-transform:rotateX(75deg);
         -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
        }
.system{
    position:relative;height:100%;width:100%;   
    -webkit-animation: orbit 5s linear infinite;
-moz-animation: orbit 5s linear infinite;
    animation: orbit 5s linear infinite;
}
#sun{transform:rotateX(75deg);width:8%;height:10%;position:relative;
-ms-transform:rotateX(75deg);
     -moz-transform:rotateX(75deg);
     -webkit-transform:rotateX(75deg);
}
@-webkit-keyframes orbit {
          from {
            -webkit-transform: rotateZ(0deg);
          }

          to {
            -webkit-transform: rotateZ(360deg);
          }
        }

[Paulie_D]

This would be easier if you could provide a Codepen.io demo.

Thanks.

[Alesso05]

http://codepen.io/Alesso05/pen/vEdfJ

This is Not Run :

#holder{
         -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
        }
        #sun{
             transform:rotateX(75deg);
-ms-transform:rotateX(75deg);
     -moz-transform:rotateX(75deg);
     -webkit-transform:rotateX(75deg) ;
}

[Ed]

I can’t tell what the desired result should be so it’s difficult to know if I’ve fixed it, but it could be because you’ve got -webkit-transform even inside of @-moz-keyframes and @keyframes.

There’s also 3 lines of CSS in your @-webkit-keyframes that look like they shouldn’t be there. Probably irrelevant but you’ve also not added a space between your img‘s src and class attributes in your HTML.

I recommend properly indenting your syntax. Though it wouldn’t have helped solve this issue, it would make it much easier to read, maintain, and debug.

[Alesso05]

I found a solution to the problem look the demo

[Author]

Posts