Question

        .wheel {
            width: 50px !important;
            height: 50px !important;
        }

            .wheel1 {    
                width: 100%;
                height: 100%;
                background-color: #3D3D3D;
                border-radius: 50% / 50%;
                position: absolute;    
            }

            .wheel2 {
                width: 80%;
                height: 80%;
                background-color: #B8B8B8;
                margin: 10%;    
                border-radius: 50% / 50%;
                position: absolute;

                -webkit-animation: wheelActive 1s;
                -webkit-animation-iteration-count: infinite;

                -moz-animation: wheelActive 1s;
                -moz-animation-iteration-count: infinite;

                -ms-animation: wheelActive 1s;
                -ms-animation-iteration-count: infinite;

                -o-animation: wheelActive 1s;
                -o-animation-iteration-count: infinite;

                animation: wheelActive 1s;
                animation-iteration-count: infinite;
            }

            @-webkit-keyframes wheelActive
            {
                0%   { margin: 5%; height: 90%; width: 90%; }
                50%  { margin: 0%; height: 100%; width: 100%; }
                100% { margin: 5%; height: 90%; width: 90%; }

            }

            @-moz-keyframes wheelActive
            {
                0%   { margin: 5%; height: 90%; width: 90%;  }
                50%  { margin: 0%; height: 100%; width: 100%;  }
                100% { margin: 5%; height: 90%; width: 90%;  }

            }

            @-ms-keyframes wheelActive
            {
                0%   { margin: 5%; height: 90%; width: 90%;  }
                50%  { margin: 0%; height: 100%; width: 100%;  }
                100% { margin: 5%; height: 90%; width: 90%;  }

            }

            @-o-keyframes wheelActive
            {
                0%   { margin: 5%; height: 90%; width: 90%;  }
                50%  { margin: 0%; height: 100%; width: 100%;  }
                100% { margin: 5%; height: 90%; width: 90%;  }

            }

            @keyframes wheelActive
            {
                0%   { margin: 5%; height: 90%; width: 90%;  }
                50%  { margin: 0%; height: 100%; width: 100%;  }
                100% { margin: 5%; height: 90%; width: 90%;  }

            }

http://jsfiddle.net/LXEXU/

I’m trying to make a wheel that looks rotating, but it isn’t working. The wheel is not 50px by 50px. How can i make this work? Thanks!

Answer 1

Add position:relative; to .wheel to make it 50px X 50px
http://jsfiddle.net/LXEXU/1/