CODEWITHSUNDEEP
css
李宝明
李宝明

Reputation: 31

css animation scale not working in chrome

/* html */ this is html section. 

 <div class="second-menu-2-container">
        <div class="second-menu-2">
            <a href="#">Home</a>
            <a href="#">world</a>
            <a href="#">Tech</a>

        </div>    
    </div>

/* css 3 */ this is css 3 section. I put <a> tag some hover scale transform, but not working . 

 .second-menu-2-container {
            background-color: #A91717;
            width: 100%;
        }


 .second-menu-2 {
            width: 1000;
            margin: 0 auto;
            height: 30px;

        }
 .second-menu-2 a {
            transition: all 2s ease-in-out;  
            color: white;
            text-decoration: none;
            position: relative;
            top: 8px;
            padding: 0 10px;
            border-right: 1px solid #E4E4E4;
            font-weight: 100;   

        }

  .second-menu-2 a:hover {
            transform: scale(2);

        }

This is the jsfiddle address :https://jsfiddle.net/libaoming/xg692wy3/

Upvotes: 3

Views: 3218

Answers (1)

MatiK
MatiK

Reputation: 573

You need to have display: block; or display: inline-block; on transformed element to make it work. See working fiddle: https://jsfiddle.net/matikucharski/xg692wy3/3/

Upvotes: 3

Related Questions