文章詳情頁
css - translateZ表現(xiàn)問題？
瀏覽：218日期：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://m.cgvv.com.cn/wenda/img/1.jpg'></body></html>
我按照視頻里的一字不差的寫下來，為什么表現(xiàn)形式是飛到了九霄云外而不是以圖形中心為基點放大？求助萬能的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雖然已經(jīng)給你標注了，但是還是想提醒一下scale(2.0)2.0為要變化的元素的二倍。
標簽：
CSS
相關文章：
1. php - 請問大批量數(shù)據(jù)處理，如何分割？2. html5和Flash對抗是什么情況？3. MySQL主鍵沖突時的更新操作和替換操作在功能上有什么差別(如圖)4. javascript - vue過渡效果 css過渡 類名的先后順序5. css右浮動字的順序顛倒了6. 數(shù)據(jù)庫 - Mysql的存儲過程真的是個坑！求助下面的存儲過程哪里錯啦，實在是找不到哪里的問題了。7. ios - 類似微博首頁，一張圖的時候是如何確定圖大小的？8. javascript - vuejs+elementui 購物車價格計算，點擊加減號修改數(shù)量總價都不會改變，但是計算執(zhí)行了9. javascript - 如何使用loadash對[object,object,object]形式的數(shù)組進行比較10. javascript - 我是做web前端的，公司最近有一個項目關于數(shù)據(jù)統(tǒng)計的！
排行榜
熱門標簽
網(wǎng)公網(wǎng)安備