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.b3g6.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. javascript - sublime快鍵鍵問題2. javascript - immutable配合react提升性能?3. vue.js - Vue 如何像Angular.js watch 一樣監聽數據變化4. 配置Apache時,添加對PHP的支持時語法錯誤5. css - 寫頁面遇到個布局問題,求大佬們幫解答,在線等,急!~6. javascript - nodejs關于進程間發送句柄的一點疑問7. javascript - 移動端上不能實現拖拽布局嗎?8. phpstudy8.1支持win11系統嗎?9. 實現bing搜索工具urlAPI提交10. Apache 已經把網站根目錄的改為allow from all了,但是服務器還是不能訪問?

網公網安備