animation - css3 动画 : div is not correct size

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/

我正在尝试制作一个看起来会旋转的轮子，但它不起作用。轮子不是 50px x 50px。我怎样才能使这项工作？谢谢!

Answer 1

添加position:relative； .wheel 使其成为 50px X 50px http://jsfiddle.net/LXEXU/1/