Трансформация квадрата в круг с помощью CSS3

Трансформация квадрата в круг. Введение

Эта статья короткая, и содержимое ее редко может пригодиться, поскольку в ней я хочу показать, как с помощью css3 реализуется трансформация квадрата в круг при наведении курсора. Хоть этот визуальный эффект и редко используется, я с ним столкнулся и решил об этом написать. Помимо редкого использования у этого эффекта есть еще один недостаток — он не будет работать в версиях IE, до 9-й включительно. А в остальных современных браузерах, поддерживающих css3 все работает отлично.

Трансформация квадрата в круг. Пример

Чтобы было понятней, о чем идет речь в статье приведу пример работы, наведите курсор на квадрат:

Трансформация квадрата в круг. Код

А теперь сам код:

<div class="example_div">Текст</div>

.example_div {
	background-color: green;
	/* стиль трансформации */
	-webkit-transition: all 0.7s;
	-moz-transition: all 0.7s;
	-o-transition: all 0.7s;
	-ms-transition: all 0.7s;
	transition: all 0.7s;	
	
	/* стили для квадрата*/
	cursor: pointer;
	width: 100px;
	height: 70px;
	font-size: 24px;
	padding-top: 30px;
	text-align: center;
}
.example_div:hover {
	/* меняем цвет */
	background-color: red;	
	
	/* поворот элемента*/
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);	
	
	/* трансформация в круг*/
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
}