成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置：首頁(yè)技術(shù)文章
文章詳情頁(yè)

css - translateZ表現(xiàn)問(wèn)題？

瀏覽：249日期：2023-07-05 11:31:31

問(wèn)題描述

<!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.piao2010.com/wenda/img/1.jpg'></body></html>

我按照視頻里的一字不差的寫下來(lái)，為什么表現(xiàn)形式是飛到了九霄云外而不是以圖形中心為基點(diǎn)放大？求助萬(wàn)能的SF。。。

問(wèn)題解答

回答1：

以圖形為中心放大是scale吧

回答2：

你這段css代碼是達(dá)不到你的需求的。以圖形中心（設(shè)置基點(diǎn)）：-webkit-transform-origin: XX XX;這個(gè)屬性是設(shè)置旋轉(zhuǎn)元素的基點(diǎn)位置放大：-webkit-transform: scale();

回答3：

-webkit-transform:translateZ(-500px);是直接在z軸方向的平移。。。

回答4：

謝邀！我在你代碼的基礎(chǔ)上修改了一下。demo你是要的這種效果嗎？你可以看一下以下兩篇文章，對(duì)你會(huì)有所幫助。CSS3詳解：transformCSS3 3D transform變換

注意我demo雖然已經(jīng)給你標(biāo)注了，但是還是想提醒一下scale(2.0)2.0為要變化的元素的二倍。

標(biāo)簽： CSS
相關(guān)文章：