html - Rotate and preserve 3d not working -

html - Rotate and preserve 3d not working -

the animation working #sun rotate not preserve 3d if stop animation rotate , preserve 3d work. how create work animation , 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 { { -webkit-transform: rotatez(0deg); } { -webkit-transform: rotatez(360deg); } }

usually when work transformation thse, think need have perspective on main div.

like:

body{ -webkit-perspective: 500px; /* chrome, safari, opera */ perspective: 500px; }

html css css3 css-animations css-transforms