css3中translate(-50%,-50%)對 transform-origin的奇葩影響?
typecho
typecho 2017-06-08 11:02:26
0
1
954
 

當我使用margin-left為負值的方法來居中對齊,然後滑鼠hover的時候放大,中心點就是transform-origin設定的上下居中,沒有任何問題:

可是當我使用 transform:translate(-50%,-50%)的居中對齊:

 

#滑鼠hover上去,放大的中心點貌似就跑到了 左上角,即使我設定了 transform-orgin,但仍然不起作用,

從控制台來看,transform-origin 屬性是起了作用的。本人非常困惑為什麼會這樣,請個人大佬指點迷津

typecho
typecho

Following the voice in heart.

全部回覆 (1)
大家讲道理

很明顯的錯誤,hover的時候把原有的translate覆蓋掉了

正確寫法如下

#test:hover{ transform: scale(1.2, 1.2) translate(-50%,-50%); }
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!