Cмотрим эффекты transition и transform

ObjectOne > CSS > Cмотрим эффекты transition и transform

Cмотрим эффекты transition и transform

Рекомендую использовать браузер chrome коим и сам пользуюсь. Но даже в этом примере, в лисе начинаются лаги, нужно «вести курсор» за div`ом. И как же мобильные устройства? Такое меню возможно как прототип галереи или товаров

<style>
.circle{
	width: 100px;
	height: 100px;
	background: #c2c2c2;
	cursor: pointer;
	transition: 2s;
	/*transition:2s;*/
	/*float: left;*/
	display: inline-block;
}

.circle:hover{
	border-radius: 50%;
	background: #D0D941;
	color: #000;
	transition:2s;
	width: 200px;
	height: 200px;
	transform: translate(50%,0);
}

.circle2:hover{
	transform: translate(-50%,0);
	background: red;
}

.circle3:hover{
	transform: rotate(360deg);
	background: green;
}
</style>

<style>

.circle{

width: 100px;

height: 100px;

background: #c2c2c2;

cursor: pointer;

transition: 2s;

/*transition:2s;*/

/*float: left;*/

display: inline-block;

}

.circle:hover{

border-radius: 50%;

background: #D0D941;

color: #000;

transition:2s;

width: 200px;

height: 200px;

transform: translate(50%,0);

}

.circle2:hover{

transform: translate(-50%,0);

background: red;

}

.circle3:hover{

transform: rotate(360deg);

background: green;

}

</style>

Наши блоки

<div class="circle circle2"></div>
<div class="circle"></div>
<div class="circle circle2"></div>
<div class="circle"></div>
<div class="circle circle2"></div>
<div class="circle"></div>
<div class="circle circle2"></div>
<div class="circle"></div>
<div class="circle circle2"></div>
<div class="circle"></div>
<div class="circle circle2"></div>
<div class="circle"></div>

<div class="circle circle3"></div>
<div class="circle"></div>
<div class="circle circle3"></div>
<div class="circle"></div>
<div class="circle circle3"></div>
<div class="circle"></div>
<div class="circle circle3"></div>
<div class="circle"></div>
<div class="circle circle3"></div>