保持元素不變，在變換元素旁邊

Question

如何製作一個元素，使其寬度和高度不會影響其周圍元素？

p { 
 
    position: relative; 
 
} 
 
.p1 { 
 
    width:200px; 
 
    height:200px; 
 
    border:1px solid blue; 
 
    outline: 1px solid green; 
 
    display:inline; 
 
    text-align:center; 
 
    background-color: red; 
 
    color: #FFF; 
 
    position:relative; 
 
    display:inline-block; 
 
    float:left; 
 
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s, color 2s; 
 
} 
 
.p1:hover { 
 
    width:500px; 
 
    height: 500px; 
 
    -webkit-transform: rotate(180deg); 
 
    color:black; 
 
}

<p class="p1">hello1</p> 
 
<p style="" class="p1">hello2</p> 
 
<p style="" class="p1">hello3</p>

演示在http://jsfiddle.net/toadalskii/mLx0x56n/

Answer 1

不要通過改變寬度/高度，因爲這些影響文檔流縮放。

使用scale（200 到500是2.5規模）轉換，以便使用transform: scale(2.5) rotate(180deg);

body { 
 
    width:100%; 
 
} 
 
p { 
 
    position: relative; 
 
} 
 
.p1 { 
 
    width:200px; 
 
    height:200px; 
 
    border:1px solid blue; 
 
    outline: 1px solid green; 
 
    display:inline; 
 
    text-align:center; 
 
    background-color: red; 
 
    color: #FFF; 
 
    position:relative; 
 
    display:inline-block; 
 
    float:left; 
 
    
 
    -webkit-transition: background-color 2s, -webkit-transform 2s, color 2s; 
 
    transition: background-color 2s, transform 2s, color 2s; 
 
} 
 
.p1:hover { 
 
    -webkit-transform: scale(2.5) rotate(180deg); 
 
    transform: scale(2.5) rotate(180deg); 
 
    color:black; 
 
    z-index:100; 
 
}

<p class="p1">hello1</p> 
 
<p class="p1">hello2</p> 
 
<p class="p1">hello3</p>

演示在http://jsfiddle.net/mLx0x56n/1/