Keep elements fixed, next to a transforming element - html

Question

How can i make an element that i transform its width and height not affect its surrounding elements ?
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>
Demo at http://jsfiddle.net/toadalskii/mLx0x56n/

Answer 1

Do not scale it by changing the width/height since those affect the document flow.
Use the scale transform (from 200 to 500 it is a scale of 2.5) so use 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>
Demo at http://jsfiddle.net/mLx0x56n/1/