CSS縮放瓦特/絕對位置

我想創建一個效果，在我的網頁，你點擊縮略圖，和一個全尺寸的股利「縮小」從縮略圖。我認爲它應該是相當直接使用CSS/Jquery：只需將div設置爲位置：絕對頂部和左側設置爲匹配點擊的縮略圖，將縮放屬性設置爲適當的低值（如.25），然後使用查詢動畫功能將縮放值設置爲1，並將頂部/左側值設置爲我想要最終圖像的位置。這幾乎奏效，有一個警告：顯然，縮放CSS不僅縮放div（及其內容）的大小，而且縮放了位置。CSS縮放瓦特/絕對位置

所以我的問題是（相對）簡單：我如何定位「全尺寸」div與頂部和左側匹配的縮略圖和縮放參數設置爲小於1？

編輯1：經過進一步研究，我發現顯然Firefox根本不支持縮放屬性，而我在其他瀏覽器中獲得的行爲太不一致了，所以我轉而使用CSS轉換/轉換。當然，轉換屬性在IE < 10上不起作用，但是之後也沒有做很多其他的東西，所以我可以忍受。

來源

2015-01-17 ibrewster

這是意想不到的行爲。另一種方法是把縮放元件內另一元件時，其具有絕對位置樣式：

$('#content div').animate({ 
 
    zoom: 0.2 
 
},2000);

#content { 
 
    position: fixed; 
 
    top: 50px; 
 
    left: 50px; 
 
    border: 1px solid black; 
 
    background: #88e; 
 
    font: 60px verdana; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content"> 
 
    <div>Lorem ipsum</div> 
 
</di>

來源

2015-01-17 00:14:51

CSS縮放瓦特/絕對位置

回答

相關問題