久久r热视频,国产午夜精品一区二区三区视频,亚洲精品自拍偷拍,欧美日韩精品二区

您的位置:首頁技術文章
文章詳情頁

css - translateZ表現問題?

瀏覽:228日期: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.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為要變化的元素的二倍。

標簽: CSS
相關文章:
主站蜘蛛池模板: 福贡县| 体育| 福清市| 衡南县| 安徽省| 梅河口市| 孟州市| 缙云县| 任丘市| 日土县| 镇康县| 台山市| 霞浦县| 碌曲县| 开阳县| 上林县| 万荣县| 临高县| 航空| 荆门市| 岳普湖县| 资中县| 哈密市| 余干县| 库伦旗| 大余县| 郁南县| 广东省| 永定县| 宜宾市| 清徐县| 蕉岭县| 天水市| 新巴尔虎右旗| 都兰县| 荃湾区| 广灵县| 财经| 邮箱| 丹寨县| 龙南县|