Css3 Transform Not Working

CSS3 transform not working

This is merely an educated guess without seeing the rest of your HTML/CSS:

Have you applied display: block or display: inline-block to li a? If not, try it.

Otherwise, try applying the CSS3 transform rules to li instead.

transform not working on css hover element

Links are display:inline by default and so are not affected by transform.

Make the link display:inline-block.

.btn:link,.btn:visited {  text-transform: uppercase;  padding: 15px 40px;  text-decoration: none;  border-radius: 100px;  transition: all .2s;  display: inline-block;}
.btn-white {  background-color: white;  color: #777;}
.btn:hover {  transform: translateY(-30px);}
.btn:active {  transform: translateY(-10px);}

<div class="text-box">  <h1 class="primary-header">    <span class="heading-primary-main">Outdoors</span>    <span class="heading-primary-sub">is where life happens</span>  </h1>  <a href="#" class="btn btn-white">Discover Our Tours</a></div>

Transition and transform not working

Try this

div.panel .text-light{
        width: 0;
     height: 0;
     opacity: 0;
 }

div.panel.show .text-light{
       width: 100%;
    height: 100%;
    opacity: 1;

}
.panel.show .text-light{
   transform:translateY(10%);
     -webkit-transition: all 1s ease-in-out;
     -moz-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
  background:red;
}

The problem with your code was that you were applying transition to the element whose styles were not getting changed by the code you wrote. The transition will work only if there is some change in css on the element where you are applying the transition.

CSS - Transform function not working on links?

You should use display: inline-block for <a> tag (or display: block), because <a> has display: inline by default, but transformable element can't be with display: inline:

Transformable element — an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or ...

Inline-block — this value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

ul {    list-style-type: none;}
ul a {    text-decoration: none;    padding-left: 20px;    background-repeat: no-repeat;    display: inline-block;}
ul a:hover {    text-decoration: underline;    color: #666;    -webkit-transform: scale(0.9);    -moz-transform: scale(0.9);    -ms-transform: scale(0.9);    transform: scale(0.9);}
a[href $= '.pdf'] {    background-image: url(http://i.stack.imgur.com/zJlYq.gif);}
a[href $= '.doc'] {    background-image: url(http://i.stack.imgur.com/z2lbW.gif);}
a[href $= '.ppt'] {    background-image: url(http://i.stack.imgur.com/Tk5Vv.gif);}
a[href $= '.xls'] {    background-image: url(http://i.stack.imgur.com/sOr7E.gif);}

<ul>    <li><a href="/one.pdf">pdf</a></li>    <li><a href="/two.doc">doc</a></li>    <li><a href="/three.ppt">ppt</a></li>    <li><a href="/four.xls">xls</a></li></ul>

css3 transform rotate 90deg not working

You are applying the transform on wrong element. Instead of applying it on each <a> tag apply it on the <ul> as a whole.

Also to make the links appear side by side even for a horizontal case [read normal without transform] we use float: left; on the <li> tag.

Here is the full code:

<div class="fixed-button">
    <ul>
        <li><a href="#" title="">Contact Us</a></li>
        <li><a href="#" title="">Shubhanshu Mishra</a></li>
        <li><a href="#" title="">SmexyyWeby</a></li>
        <li><a href="#" title="">SmexyyWeby</a></li>
    </ul>
</div>

I have just added the webkit transform you can add the transform for other elements in the same tag.

Also your <a> tag was having property position:absolute; which should be removed to make the links appear properly.

Here is the final CSS I have used:

div.fixed-button{
 position: absolute;
 display: block!important;
 z-index: 90000;
 margin: 0;
 outline: 0;
 top: 200px;
}

.fixed-button ul{
    -webkit-transform: scale(1) rotate(90deg) translate(0px, 0px);
    margin-left: 50px;
    -webkit-transform-origin: 0% 0 0;
}

div.fixed-button a {
    background-color: black;
    height: auto;
    padding: 10px 14px;
    font: bold 13px/16px arial, sans-serif;
    color: white;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
}

li{
    float: left;
}

The 120px in -webkit-transform: translate(0px, 120px) should be set according to your needs in your css as it is changes for different layout and translates the list horizontally.

UPDATE: I have updated the code by using -webkit-transform-origin attribute which will allow you to set the origin about which to rotate your element and also setting a margin-left for proper placement. It works effectively for as many number of <li> elements as you want. You can check the new code at the link below.

Do check the working code at: http://jsfiddle.net/shubhanshumishra/qhS6r/

CSS transform animation not working as expected

That animation messes up a bit due to both width and the translate animating at the same time. Since you were tranlating it by 50% width and 50% height, that means that those values change more rapidly than they should since both those values are also changing.

My suggestion for fixing this is to use flexbox to center the logo div, so that you can animate only width/height, while flex takes care of the location.

window.onload = function() {
  var logo = document.getElementById("logo");
  setTimeout(function() {
    logo.classList.remove("loading");
  }, 500);
}

:root {
  --main: #007;
  --bright: #fdc;
}

@media (max-width: 1024px) {
  #logo a {
    position: fixed;
    left: 50%;
    transform: translate(-50%);
  }
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--main);
}

#logo div {
  background-color: var(--bright);
  border-color: var(--main);
  border-style: solid;
  
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-width: 12px;
  transition: all .8s ease;
}

#logo.loading div {
  width: 172px;
  height: 72px;
  border-width: 0px;
}

#logo a {
  display: inline-grid;
  fill: var(--main);
}

#logo svg {
  width: 140px;
  height: 40px;
  margin: 16px;
}

#logo {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="logo" class="loading">
  <div>
    <a href="https://example.com">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 140 40" style="enable-background:new 0 0 140 40;" xml:space="preserve">
        <g>
          <path d="M28.7,30.8v6.4H8V2.8h8v28H28.7z"/>
          <path d="M65.6,20c0,2.5-0.4,4.8-1.3,6.9c-0.9,2.1-2.1,4-3.6,5.6c-1.6,1.6-3.4,2.8-5.6,3.7c-2.2,0.9-4.6,1.3-7.3,1.3
                   c-2.7,0-5.1-0.4-7.3-1.3c-2.2-0.9-4.1-2.1-5.6-3.7c-1.6-1.6-2.8-3.4-3.6-5.6c-0.9-2.1-1.3-4.4-1.3-6.9s0.4-4.8,1.3-6.9
                   c0.9-2.1,2.1-4,3.6-5.6c1.6-1.6,3.4-2.8,5.6-3.7c2.2-0.9,4.6-1.3,7.3-1.3c2.7,0,5.1,0.5,7.3,1.4c2.2,0.9,4.1,2.1,5.6,3.7
                   c1.6,1.6,2.8,3.4,3.6,5.6C65.2,15.2,65.6,17.5,65.6,20z M57.4,20c0-1.7-0.2-3.2-0.7-4.6c-0.4-1.4-1.1-2.5-1.9-3.5
                   c-0.8-0.9-1.8-1.7-3-2.2C50.7,9.3,49.3,9,47.8,9c-1.5,0-2.9,0.3-4.1,0.8c-1.2,0.5-2.2,1.2-3,2.2c-0.8,0.9-1.5,2.1-1.9,3.5
                   s-0.7,2.9-0.7,4.6c0,1.7,0.2,3.2,0.7,4.6c0.4,1.4,1.1,2.5,1.9,3.5c0.8,0.9,1.8,1.7,3,2.2c1.2,0.5,2.6,0.7,4.1,0.7
                   c1.5,0,2.9-0.2,4.1-0.7c1.2-0.5,2.2-1.2,3-2.2c0.8-0.9,1.5-2.1,1.9-3.5C57.2,23.2,57.4,21.7,57.4,20z"/>
          <path d="M86.8,19.4H99v14.5c-1.8,1.3-3.6,2.2-5.6,2.8c-2,0.6-4.1,0.9-6.2,0.9c-2.8,0-5.4-0.4-7.7-1.3c-2.3-0.9-4.3-2.1-5.9-3.7
                   c-1.6-1.6-2.9-3.4-3.8-5.6c-0.9-2.1-1.3-4.5-1.3-7c0-2.6,0.4-4.9,1.3-7.1s2.1-4,3.6-5.5c1.6-1.6,3.5-2.8,5.7-3.6
                   c2.2-0.9,4.7-1.3,7.5-1.3c1.4,0,2.8,0.1,4,0.4c1.3,0.2,2.4,0.6,3.5,1s2,0.9,2.9,1.5c0.9,0.6,1.7,1.2,2.4,1.8l-2.3,3.5
                   c-0.4,0.5-0.8,0.9-1.4,1s-1.2,0-1.9-0.4c-0.6-0.4-1.2-0.7-1.8-1c-0.6-0.3-1.1-0.5-1.7-0.7c-0.6-0.2-1.2-0.3-1.8-0.4
                   C87.7,9.1,86.9,9,86.1,9c-1.5,0-2.8,0.3-4,0.8c-1.2,0.5-2.2,1.3-3.1,2.2c-0.8,1-1.5,2.1-1.9,3.5c-0.5,1.3-0.7,2.8-0.7,4.5
                   c0,1.8,0.3,3.4,0.8,4.9c0.5,1.4,1.2,2.6,2.1,3.6c0.9,1,2,1.7,3.3,2.2c1.3,0.5,2.7,0.8,4.3,0.8c1,0,1.8-0.1,2.6-0.3
                   c0.8-0.2,1.5-0.4,2.3-0.8v-5.2h-3.4c-0.5,0-0.9-0.1-1.2-0.4c-0.3-0.3-0.4-0.6-0.4-1V19.4z"/>
          <path d="M138,20c0,2.5-0.4,4.8-1.3,6.9c-0.9,2.1-2.1,4-3.6,5.6c-1.6,1.6-3.4,2.8-5.6,3.7c-2.2,0.9-4.6,1.3-7.3,1.3
                   c-2.7,0-5.1-0.4-7.3-1.3c-2.2-0.9-4.1-2.1-5.6-3.7c-1.6-1.6-2.8-3.4-3.6-5.6c-0.9-2.1-1.3-4.4-1.3-6.9s0.4-4.8,1.3-6.9
                   c0.9-2.1,2.1-4,3.6-5.6c1.6-1.6,3.4-2.8,5.6-3.7c2.2-0.9,4.6-1.3,7.3-1.3c2.7,0,5.1,0.5,7.3,1.4c2.2,0.9,4.1,2.1,5.6,3.7
                   c1.6,1.6,2.8,3.4,3.6,5.6C137.6,15.2,138,17.5,138,20z M129.8,20c0-1.7-0.2-3.2-0.7-4.6c-0.4-1.4-1.1-2.5-1.9-3.5
                   c-0.8-0.9-1.8-1.7-3-2.2c-1.2-0.5-2.6-0.8-4.1-0.8c-1.5,0-2.9,0.3-4.1,0.8c-1.2,0.5-2.2,1.2-3,2.2c-0.8,0.9-1.5,2.1-1.9,3.5
                   c-0.4,1.4-0.7,2.9-0.7,4.6c0,1.7,0.2,3.2,0.7,4.6c0.4,1.4,1.1,2.5,1.9,3.5c0.8,0.9,1.8,1.7,3,2.2c1.2,0.5,2.6,0.7,4.1,0.7
                   c1.5,0,2.9-0.2,4.1-0.7c1.2-0.5,2.2-1.2,3-2.2c0.8-0.9,1.5-2.1,1.9-3.5C129.6,23.2,129.8,21.7,129.8,20z"/>
        </g>
      </svg>
    </a>
  </div>
</div>

Css3 Transform Not Working