文章詳情頁
css - translateZ表現問題？
瀏覽：204日期：2023-07-05 11:31:31
問題描述
<!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://www.aoyou183.cn/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為要變化的元素的二倍。
標簽：
CSS
相關文章：
1. javascript - 前端開發 本地靜態文件頻繁修改，預覽時的緩存怎么解決？2. javascript - jQuery each 方法第三個參數args 如何解釋？3. css3的背景圖片屬性有沒有把圖中這塊藍框區域(275*230)完整放在60*50區域？怎么寫呢4. android - 優酷的安卓及蘋果app還在使用flash技術嗎？5. javascript - js中遞歸與for循環同時發生的時候，代碼的執行順序是怎樣的？6. java - new + 類名，一定需要申明一個對象嗎？7. 新手 - Python 爬蟲 問題 求助8. mysql數據庫每次查詢是一條線程嗎？9. python - linux怎么在每天的凌晨2點執行一次這個log.py文件10. 如何分別在Windows下用Winform項模板+C#，在MacOSX下用Cocos Application項目模板+Objective-C實現一個制作游戲的空的黑窗口？
排行榜
網公網安備