title: CSS Transition Problems in IE
body: <p>I have a problem with <strong>HTML</strong> and <strong>CSS</strong>. So I have a <strong>CSS</strong> style for my list but in <strong>IE</strong> it doesn't work.</p>
  
  <p>Here is my <strong>HTML</strong> file:</p>
  
  <pre><code>&lt;ul class="main-ul2"&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Article&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Blog&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Gallery&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And here is my <strong>CSS</strong> file:</p>
  
  <pre><code>.main-ul2 li {
      margin-left: 0;
      float:left;
      position:relative;
      width:25%;
      text-align:center;
      }
  .main-ul2 li a {
  
      display:block;
      padding-bottom: 20px;
      padding-right:10px;
      padding-top: 10px;
      padding-left:10px;
      text-decoration:none;
      position: relative;
      z-index: 100;
      background-color: rgba(164, 164, 164, 0.2);
      –ms-??transition: all 1s;
      -webkit-transition: all 1s;
     -moz-transition: all 1s;
     -o-transition: all 1s;
     transition: all 1s;
  }
  .main-ul2 li a span{
     display:block;
     padding-top:10px;
     font-weight:700;
     font-size: 20px;
     color: rgba(120, 120, 120, 0.9);
     text-transform:uppercase;
     font-family: 'Kotta One', serif;
  
  .main-ul2 li:hover span{
     color: #fff;
  }
  
  .main-ul2 li:nth-child(1):hover a{
  background-color: rgba(175,54,55,0.8);
  –ms-transform:rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  transform: rotate(-3deg);
  }
  .main-ul2 li:nth-child(2):hover a{
     background-color: rgba(199, 204, 73, 0.8);
     –ms-transform:rotate(-3deg);
     -moz-transform: rotate(-3deg);
     -webkit-transform: rotate(-3deg);
     -o-transform: rotate(-3deg);
     transform: rotate(-3deg);
  }
  .main-ul2 li:nth-child(3):hover a{
     background-color: rgba(213, 135, 11, 0.8);
     –ms-transform:rotate(3deg);
     -moz-transform: rotate(3deg);
     -webkit-transform: rotate(3deg);
     -o-transform: rotate(3deg);
     transform: rotate(3deg);
  }
  .main-ul2 li:nth-child(4):hover a{
     background-color: rgba(51, 143, 144, 0.8);
     –ms-transform:rotate(3deg);
     -moz-transform: rotate(3deg);
     -webkit-transform: rotate(3deg);
     -o-transform: rotate(3deg);
     transform: rotate(3deg);
  }
  </code></pre>
  
  <p>So if you are using <strong>Google Chrome</strong> you can insert my code in <a href="http://cssdesk.com/7WJmJ" rel="nofollow">CCS Desk</a> or any other online <strong>CSS</strong> editors and everything works fine (bullets are changing color and moving), but if you open my code in <strong>IE</strong> you'll see that it's not working fine. </p>
  
  <p>I have search for it in <strong>Google</strong>, and I found that I need to add <strong>Microsoft transform</strong>.</p>
  
  <p>So can someone tell me how can I add Microsoft transform or if there any other way to fix this?</p>
  
  <p>Thanks.</p>