Флипборды CSS

В этом уроке мы собираемся создать эффект перевернутой доски с помощью CSS, есть 2 эффекта, которые мы можем создать: одно событие при наведении, у нас будет одна перевернутая доска по горизонтали и другая доска, которая перевернется по вертикали.

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

Посмотрите демонстрацию, чтобы увидеть эффект.

демонстрация

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

HTML

Сначала мы начнем с HTML для досок. Каждая доска состоит из элемента div с двумя другими элементами div внутри, это элементы, которые мы собираемся использовать в качестве лицевой панели и перевернутой платы.

<div class="flip-boards">
<div class="board top">
<div class="front">
<h2>Front Board</h2>
</div>
<div class="flipped">
<h2>Flipped Board</h2>
</div>
</div>
</div>

Стайлинг Доски

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

.flip-boards .board
{
	float:left;
	margin: 2em 8em;
	position: relative;
	width: 200px;
	height: 200px;
	cursor: pointer;
}
.flip-boards .board div
{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1px solid #ccc;
}

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

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

.flip-boards .board .front
{
	color:#eee;
	background: rgb(207,231,250);
	background: -moz-linear-gradient(top,  rgba(207,231,250,1) 0%, rgba(99,147,193,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(207,231,250,1)), color-stop(100%,rgba(99,147,193,1)));
	background: -webkit-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: -o-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: -ms-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: linear-gradient(to bottom,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=0 );
}
.flip-boards .board .flipped
{
	color:#555;
	background: rgb(238,238,238);
	background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(238,238,238,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1)));
	background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );
}

С помощью перевернутой доски нам нужно скрыть вторую доску, пока она не будет перевернута, чтобы увидеть ее. Для этого мы используем свойство CSS backface-visibility , это свойство связано с трехмерными преобразованиями элемента. Используя 3D-преобразования, вы можете перевернуть элемент по оси Y, чтобы передняя часть элемента теперь была обращена в противоположном направлении. Используя видимость задней поверхности, вы можете скрыть любые элементы, которые не обращены к передней части экрана.

.flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
  backface-visibility:     hidden;
}

Этот код вращает элемент на 180 градусов, так что теперь передняя часть обращена к экрану, и теперь этот элемент можно скрыть с помощью свойства backface-visibility . Теперь мы можем добавить это на нашу страницу, используя следующий CSS.

.flip-boards .board div
{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1px solid #ccc;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    backface-visibility:         hidden;
}
.flip-boards .board.top .flipped
{
	-webkit-transform: rotateX( 180deg );
	-moz-transform: rotateX( 180deg );
	-ms-transform: rotateX( 180deg );
	transform: rotateX( 180deg );
}

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

.flip-boards .board.top:hover
{
	-webkit-transform: rotateX( 180deg );
	-moz-transform: rotateX( 180deg );
	-ms-transform: rotateX( 180deg );
	transform: rotateX( 180deg );
}

Мы также должны добавить эффект перехода, чтобы при повороте доски происходил плавный переворот, это делается с помощью CSS-перехода, нам также необходимо убедиться, что при преобразовании плат оно сохранит трехмерное пространство, используя свойство transform- стиль .

.flip-boards .board
{
	float:left;
	margin: 2em 8em;
	position: relative;
	width: 200px;
	height: 200px;
	cursor: pointer;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}

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

Посмотрите демо, чтобы увидеть его в действии.

демонстрация

Полный код перевернутой доски

<div class="flip-boards">
<div class="board top">
<div class="front">
<h2>Front Board</h2>
</div>
<div class="flipped">
<h2>Flipped Board</h2>
</div>
</div>
<div class="board left">
<div class="front">
<h2>Front Board</h2>
</div>
<div class="flipped">
<h2>Flipped Board</h2>
</div>
</div>
</div>
<div class="flip-boards">
<div class="board top">
<div class="front">
				<img src="http://placedog.com/200/200" />
			</div>
<div class="flipped">
				<img src="http://placekitten.com/g/200/200" />
			</div>
</div>
<div class="board left">
<div class="front">
				<img src="http://placekitten.com/200/200" />
			</div>
<div class="flipped">
				<img src="http://placedog.com/g/200/200" />
			</div>
</div>
</div>

.flip-boards{ position: relative; }
.flip-boards .board
{
	float:left;
	margin: 2em 8em;
	position: relative;
	width: 200px;
	height: 200px;
	cursor: pointer;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}
.flip-boards .board div
{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1px solid #ccc;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    backface-visibility:     hidden;
}
.flip-boards .board .front
{
	color:#eee;
	background: rgb(207,231,250); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(207,231,250,1) 0%, rgba(99,147,193,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(207,231,250,1)), color-stop(100%,rgba(99,147,193,1)));
	background: -webkit-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: -o-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: -ms-linear-gradient(top,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	background: linear-gradient(to bottom,  rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=0 );
}
.flip-boards .board .flipped
{
	color:#555;
	background: rgb(238,238,238); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(238,238,238,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1)));
	background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );
}
.flip-boards .board h2{
	margin-top:80px;
	font-size: 1em;
}
.flip-boards .board.top:hover
{
	-webkit-transform: rotateX( 180deg );
	-moz-transform: rotateX( 180deg );
	-ms-transform: rotateX( 180deg );
	transform: rotateX( 180deg );
}
.flip-boards .board.top .flipped
{
	-webkit-transform: rotateX( 180deg );
	-moz-transform: rotateX( 180deg );
	-ms-transform: rotateX( 180deg );
	transform: rotateX( 180deg );
}
.flip-boards .board.left:hover
{
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-ms-transform: rotateY( 180deg );
	transform: rotateY( 180deg );
}
.flip-boards .board.left .flipped
{
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-ms-transform: rotateY( 180deg );
	transform: rotateY( 180deg );
}

демонстрация

HTML

Стайлинг Доски

демонстрация

Полный код перевернутой доски

Категории

Последние статьи

Рефакторинг Hudson God Class

Альтернативы синтаксиса Java лямбда

Morphia и MongoDB: развивающиеся структуры документов

OpenShift Express: развертывание приложения Java EE (с поддержкой AS7)

Интеграция jqGrid, REST, AJAX и Spring MVC