title: Rotation in 3D automatically using CSS
body: <p>I want to rotate a picture as 3D using CSS. I want to rotate with axis Y. I have tried but it doesn't work. I have picture that is like cylinder. So, that picture middle point should be in origin. And it should rotate with Y axis.</p>
  
  <pre><code>&lt;style&gt;
  #picture{
              position: absolute;
              width: 400px;
              height: 200px;              
              padding-top:300px;
              padding-left: 450px;
              text-align:center;
                overflow: hidden;
                  -webkit-animation: rotating 2s linear infinite;
                  -moz-animation: rotating 2s linear infinite;
                  -ms-animation: rotating 2s linear infinite;
                   -o-animation: rotating 2s linear infinite;
                    animation: rotating 2s linear infinite;
  
  
          }
          @keyframes picture {
           from {
             -ms-transform: rotate(0deg);
               -moz-transform: rotate(0deg);
              -webkit-transform: rotate(0deg);
               -o-transform: rotate(0deg);
               transform: rotate(0deg);
           }
           to {
              -ms-transform: rotate(360deg);
             -moz-transform: rotate(360deg);
              -webkit-transform: rotate(360deg);
              -o-transform: rotate(360deg);
                  transform: rotate(360deg);
               }
            }
  
  
  &lt;/style&gt;
  
  &lt;div id="container"&gt;
   &lt;img id="picture" src="textures/toothpaste.png"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried this. But it doesn't work. </p>