保持元素固定，在变换元素旁边

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/

演示