CSS 3D Анимация для Изображений, Карт и Блоков

CSS 3D Анимация для Изображений, Карт и Блоков

CSS 3D Анимация для Изображений, Карт и Блоков

Google Plus постоянно обеспечивает идеями фронтальных разработчиков, особенно когда дело доходит до CSS и JavaScript, которые они создают. Ниже, мы продублируем их карту с отклоняемым эффектом для карты и описания. Этот эффект использует 3D CSS анимацию, что делает эффект еще более интересным, анимация не требует JavaScript!

CSS 3D Анимация для Изображений, Карт и Блоков

HTML

Есть ряд HTML элементов, которые должны быть заданы, для достижения эффекта:

<div id="container">
	<div class="parent1">
		<div class="parent2">
			<div class="parent3">
				<!-- Здесь Контент -->
			</div>
		</div>
	</div>
</div>

Первый родительский элемент определяет 3D состояние, второй элемент будет содержать полностью видимый код во время анимации, а третий элемент, заметно отличается переходом анимации.

CSS

CSS для завершения этой анимаций довольно интересен, и стилей здесь гораздо меньше, чем вы подумали:

/* Статическое состояние */
#container 	{ 
	width: 400px; 
	height: 400px; 
	position: relative; 
	border: 1px solid #ccc; 
}
.parent1 	{ 
	/* Общий контейнер анимации */
	height: 0; 
	overflow: hidden;
 
	transition-property: height;
	transition-duration: 1s;
	perspective: 1000px;
	transform-style: preserve-3d;
}
.parent2	{ 
	/* Полное содержание во время анимации */ 
}
.parent3	{ 
	/* Анимационный, "сложный" блок */
	height: 56px; 
	transition-property: all; 
	transition-duration: 1s;
	transform: rotateX(-90deg);
	transform-origin: top; 
}
 
/* Состояние при наведении, чтобы вызвать анимацию */
#container:hover .parent1	{ 
	height: 111px; 
}
#container:hover .parent3	{
	transform: rotateX(0deg); 
	height: 111px; 
}

Простой пример с Картой

Этот пример показывает карту. Карта в этой демонстрации — изображение, но вы можете использовать реальную карту Google Map!

 

Код примера с картой
<h3>Простой пример с Картой</h3>
<div id="container">
<div class="parent1">
<div class="parent2">
<div class="parent3"><img style="opacity: .7;" src="http://interzarabotok.ru/wp-content/uploads/2016/06/karta-almaty.jpg" /></div>
</div>
</div>
</div>
 
<style> 
		#container 	{ 
			width: 400px; 
			height: 400px; 
			position: relative; 
			border: 1px solid #ccc; 
			background: url(http://interzarabotok.ru/wp-content/uploads/2016/06/karta-almaty-2.jpg) 0 0 no-repeat;
		}
		.parent1 	{ 
			height: 0; 
			overflow: hidden;
 
			-webkit-transition-property: height;
			-webkit-transition-duration: .5s; 
			-webkit-perspective: 1000px; 
			-webkit-transform-style: preserve-3d; 
 
			-moz-transition-property:height; 
			-moz-transition-duration: .5s; 
			-moz-perspective: 1000px; 
			-moz-transform-style: preserve-3d; 
 
			-o-transition-property:height; 
			-o-transition-duration: .5s; 
			-o-perspective: 1000px; 
			-o-transform-style: preserve-3d;
 
			transition-property: height;
			transition-duration: .5s;
			perspective: 1000px;
			transform-style: preserve-3d;
		}
		.parent2	{ 
		
		}
		.parent3	{ 
			height: 56px; 
 
			-webkit-transition-property: all; 
			-webkit-transition-duration: .5s;
			-webkit-transform: rotateX(-90deg);
			-webkit-transform-origin: top; 
 
			-moz-transition-property: all; 
			-moz-transition-duration: .5s;
			-moz-transform: rotateX(-90deg);
			-moz-transform-origin: top; 
 
			-o-transition-property: all; 
			-o-transition-duration: .5s;
			-o-transform: rotateX(-90deg);
			-o-transform-origin: top;
 
			transition-property: all; 
			transition-duration: .5s;
			transform: rotateX(-90deg);
			transform-origin: top; 
		}
 
		#container:hover .parent1	{ height: 111px; }
		#container:hover .parent3	{ 
			-webkit-transform: rotateX(0deg); 
			-moz-transform: rotateX(0deg); 
			-o-transform: rotateX(0deg); 
			transform: rotateX(0deg); 
			height: 111px; 
		}
</style>

Текст поверх изображения

Этот пример показывает, элегантный способ создания эффекта, который использует полупрозрачность над изображением.

 

Текст
на изображении
Текст поверх изображения
<h3>Текст поверх изображения</h3>
<div id="text-container">
<div class="text-parent1">
<div class="text-parent2">
<div class="text-parent3" style="color: #fff; background: rgba(0, 0, 0, .5);"><span style="color: #fff; font-size: 24px; display: block; padding: 20px 0 0 20px;">Текст</span>
<span style="color: #fff; font-size: 16px; display: block; padding: 10px 0 40px 120px;">на изображении</span></div>
</div>
</div>
</div>
 
<style> 
		#text-container 	{ 
			width: 400px; 
			height: 400px; 
			position: relative; 
			border: 1px solid #ccc; 
			background: url(http://interzarabotok.ru/wp-content/uploads/2016/06/karta-almaty-2.jpg) 0 0 no-repeat;
		}
		.text-parent1 	{ 
			height: 0; 
			overflow: hidden;
 
			-webkit-transition-property: height;
			-webkit-transition-duration: .5s; 
			-webkit-perspective: 1000px; 
			-webkit-transform-style: preserve-3d; 
 
			-moz-transition-property:height; 
			-moz-transition-duration: .5s; 
			-moz-perspective: 1000px; 
			-moz-transform-style: preserve-3d; 
 
			-o-transition-property: all; 
			-o-transition-duration: .5s;
			-o-transform: rotateX(-90deg);
			-o-transform-origin: top;
 
			transition-property: height;
			transition-duration: .5s;
			perspective: 1000px;
			transform-style: preserve-3d;
		}
		.text-parent2	{ 
		
		}
		.text-parent3	{ 
			height: 56px; 
 
			-webkit-transition-property: all; 
			-webkit-transition-duration: .5s;
			-webkit-transform: rotateX(-90deg);
			-webkit-transform-origin: top; 
 
			-moz-transition-property: all; 
			-moz-transition-duration: .5s;
			-moz-transform: rotateX(-90deg);
			-moz-transform-origin: top; 
 
			-o-transition-property: all; 
			-o-transition-duration: .5s;
			-o-transform: rotateX(-90deg);
			-o-transform-origin: top;
 
			transition-property: all; 
			transition-duration: .5s;
			transform: rotateX(-90deg);
			transform-origin: top; 
		}
 
		#text-container:hover .text-parent1	{ height: 111px; }
		#text-container:hover .text-parent3	{ 
			-webkit-transform: rotateX(0deg); 
			-moz-transform: rotateX(0deg); 
			-o-transform: rotateX(0deg); 
			transform: rotateX(0deg); 
			height: 111px; 
		}
</style>

Блоки

Этот пример показывает, цветные блоки и немного медленную анимацию, чтобы дать понятие о том, что трансформируется.

 

Контент
Блоки
<h3>Блоки</h3>
<div id="slow-container">
<div class="slow-parent1">
<div class="slow-parent2">
<div class="slow-parent3">Контент</div>
</div>
</div>
</div>
 
<style> 
		#slow-container 	{ width: 400px; height: 400px; position: relative; border: 1px solid #ccc; }
		.slow-parent1 	{ 
			height: 0; 
			overflow: hidden;
 
			-webkit-transition-property: height;
			-webkit-transition-duration: .5s; 
			-webkit-perspective: 1000px; 
			-webkit-transform-style: preserve-3d; 
 
			-moz-transition-property:height; 
			-moz-transition-duration: .5s; 
			-moz-perspective: 1000px; 
			-moz-transform-style: preserve-3d; 
 
			-o-transition-property: all; 
			-o-transition-duration: .5s;
			-o-transform: rotateX(-90deg);
			-o-transform-origin: top;
 
			transition-property: height;
			transition-duration: .5s;
			perspective: 1000px;
			transform-style: preserve-3d;
 
			background: lightgreen;
		}
		.slow-parent2	{ 
			background: lightblue;
		}
		.slow-parent3	{ 
			height: 56px; 
			background: pink;
 
			-webkit-transition-property: all; 
			-webkit-transition-duration: .5s;
			-webkit-transform: rotateX(-90deg);
			-webkit-transform-origin: top; 
 
			-moz-transition-property: all; 
			-moz-transition-duration: .5s;
			-moz-transform: rotateX(-90deg);
			-moz-transform-origin: top; 
 
			-o-transition-property: all; 
			-o-transition-duration: .5s;
			-o-transform: rotateX(-90deg);
			-o-transform-origin: top;
 
			transition-property: all; 
			transition-duration: .5s;
			transform: rotateX(-90deg);
			transform-origin: top; 
		}
 
		#slow-container:hover .slow-parent1	{ height: 111px; }
		#slow-container:hover .slow-parent3	{ 
			-webkit-transform: rotateX(0deg); 
			-moz-transform: rotateX(0deg); 
			-o-transform: rotateX(0deg); 
			transform: rotateX(0deg); 
			height: 111px;
		}
</style>
Aliexpress INTAliexpress INTAliexpress INT

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *