css - translateZ表現問題?
問題描述
<!DOCTYPE html><html><head><style>body { padding: 100px; -webkit-perspective:200px;-webkit-transform-style:preserve-3d; }img { -webkit-transform:translateZ(0);-webkit-transition:5s ease all; width: 100px; height: 150px;}img:hover { -webkit-transform:translateZ(-500px); }</style></head><body><img src='http://m.baoyu77737.com/wenda/img/1.jpg'></body></html>
我按照視頻里的一字不差的寫下來,為什么表現形式是飛到了九霄云外而不是以圖形中心為基點放大?求助萬能的SF。。。
問題解答
回答1:以圖形為中心放大是scale吧
回答2:你這段css代碼是達不到你的需求的。以圖形中心(設置基點):-webkit-transform-origin: XX XX;這個屬性是設置旋轉元素的基點位置放大:-webkit-transform: scale();
回答3:-webkit-transform:translateZ(-500px);是直接在z軸方向的平移。。。
回答4:謝邀!我在你代碼的基礎上修改了一下。demo你是要的這種效果嗎?你可以看一下以下兩篇文章,對你會有所幫助。CSS3詳解:transformCSS3 3D transform變換
注意我demo雖然已經給你標注了,但是還是想提醒一下scale(2.0)2.0為要變化的元素的二倍。
相關文章:
1. docker images顯示的鏡像過多,狗眼被亮瞎了,怎么辦?2. Java:密碼包(加密和解密)。無效的密鑰錯誤3. css - 微信小程序點擊展開,再次點擊收回4. 點擊頁面就自動輸入到mysql.求解5. macos - mac下docker如何設置代理6. css - vue.js的vue單文件組件style中的scoped屬性無效7. angular.js - 在ng-option 里使用過濾器無效8. node.js - 求問nw.js開發桌面版,其js計算性能如何?9. 我在centos容器里安裝docker,也就是在容器里安裝容器,報錯了?10. thinkphp5.1學習時遇到session問題
