简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
What is the strange effect of translate(-50%,-50%) on transform-origin in CSS3?
typecho
typecho 2017-06-08 11:02:26
0
1
955
        <style>
        #test{
            width: 100px;
            height: 100px;
            background-color: red;
            transition: all 1s;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            /*transform:translate(-50%,-50%);*/
            transform-origin: 50% 50%;
        }
        #test:hover{
            transform: scale(1.2, 1.2);
        }
    </style>
</head>
<body>
    <p id="test"></p>
</body>

When I use a negative margin-left method to align the center, and then zoom in when the mouse hovers, the center point is the upper and lower center set by transform-origin, and there is no problem:

But when I use transform:translate(-50%,-50%) for center alignment: 

    <style>
        #test{
            width: 100px;
            height: 100px;
            background-color: red;
            transition: all 1s;
            position: absolute;
            left: 50%;
            top: 50%;
            /*margin-left: -50px;*/
            transform:translate(-50%,-50%);
            transform-origin: 50% 50%;
        }
        #test:hover{
            transform: scale(1.2, 1.2);
        }
    </style>
</head>
<body>
    <p id="test"></p>
</body>

When the mouse hovers up, the center point of the magnification seems to go to the upper left corner. Even if I set transform-orgin, it still doesn't work.

From the console, the transform-origin attribute works. I am very confused as to why this is happening, please give me some advice

typecho
typecho

Following the voice in heart.

reply all(1)
大家讲道理
大家讲道理2017-06-08 11:04:26 1 floor

Obvious mistake, when hover the original translate was overwritten

The correct way to write it is as follows

#test:hover{
  transform: scale(1.2, 1.2) translate(-50%,-50%);
}
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！