Новый урок практики анимации на чистом CSS. Сегодня мы будем делать 3D билборд с на чистом CSS. Изображение будут поворачиваться когда пользователь будет наводить курсор мыши.

HTML

Давайте я вам все распишу…

.wrapper_for_bil — это основной блок внутри которого размещаются билборды.

.stage — это список в котором будут выводиться билборды.

.scene — используется для элемента списка (билборда).

.poster — это передняя часть билборда.

.info — все что находится на задней части билборда.

<div class="container_for_bil">
        <div class="wrapper_for_bil">
            <ul class="stage clearfix">
                <li class="scene">
                    <div class="movie" onclick="return true">
                        <div class="poster"></div>
                        <div class="info">
                            <header>
                                <h1>PROG-TIME</h1>
                                <span class="year">2019</span>
                                <span class="rating">BEST</span>
                            </header>
                            <p>
                                PROG-TIME - сайт на котором размещается только качественный контент.
                                Все пользователи рады, и всегда обязательно подписываются на уведомления
                                в группе Вконтакте и на Youtube
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

CSS

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/*основной контейнер в котором размещён весь код*/
.wrapper_for_bil {
   margin: auto; //внешние отступы
   max-width: 960px; //максимальная ширина
   display: flex; 
   justify-content: center; //выравнивание по горизонтали
}
/*стили для списка*/
.stage {
   list-style: none; //убираем маркеры со списка
   padding: 0; //внутренние отступы
}
/*************************************
**************************************/
.scene {
   width: 260px; //ширина
   height: 400px; //высота
   margin: 30px; //внешний отступ
   float: left;
   perspective: 1000px; //определяет на сколько элемент удален от точки обзора
}
.movie {
   width: 260px;
   height: 400px;
   transform-style: preserve-3d; //анимация трансформации
   transform: translateZ(-130px); //трансформации по оси z
   transition: transform 350ms; //скорости анимации 
}
.movie:hover {
   transform: rotateY(-78deg) translateZ(20px); /*поворачиваем элемент по оси Y*/
}
/*************************************
**************************************/
.movie .poster, 
.movie .info {
   position: absolute;
   width: 260px;
   height: 400px;
   background-color: #fff; //цвет заднего фона
   backface-visibility: hidden; //скрываем тыльную сторону
}
.movie .poster  {
   transform: translateZ(130px);
   background-size: cover; //размер фона
   background-repeat: no-repeat; //отключаем повтор фона
}
.movie .info {
   transform: rotateY(90deg) translateZ(130px);
   border: 1px solid #B8B5B5; //цвет и ширина границы
   font-size: 0.75em; //размер шрифта
}
/*************************************
**************************************/
.info header {
   color: #FFF;
   padding: 7px 10px;
   font-weight: bold; //жирность шрифта
   height: 195px;
   background-size: contain;
   background-repeat: no-repeat;
   text-shadow: 0px 1px 1px rgba(0,0,0,1); //тень текста
}
.info header h1 {
   margin: 0 0 2px;
   font-size: 1.4em;
}
.info header .rating {
   border: 1px solid #FFF;
   padding: 0px 3px;
}
.info p {
   padding: 1.2em 1.4em;
   margin: 2px 0 0;
   font-weight: 700;
   color: #666;
   line-height: 1.4em; //высота строки
   border-top: 10px solid #555;
}
/*************************************
**************************************/
.movie .poster,
.movie .info,
.movie .info header {
   transition: box-shadow 350ms;
}
.csstransforms3d .movie .poster {
   box-shadow: inset 0px 0px 40px rgba(255,255,255,0); //тень блока
}
.csstransforms3d .movie:hover .poster {
   box-shadow: inset 300px 0px 40px rgba(255,255,255,0.8);
}
.csstransforms3d .movie .info, 
.csstransforms3d .movie .info header {
   box-shadow: inset -300px 0px 40px rgba(0,0,0,0.5);
}
.csstransforms3d .movie:hover .info, 
.csstransforms3d .movie:hover .info header {
   box-shadow: inset 0px 0px 40px rgba(0,0,0,0);
}
/*************************************
**************************************/
.scene:nth-child(1) .movie .poster {
    background-image: url(1.jpg);
}
.scene:nth-child(1) .info header {
    background-image: url(2.jpg);
    background-size: 100%;
}
/*************************************
**************************************/
.no-csstransforms3d .movie .poster, 
.no-csstransforms3d .movie .info {
   position: relative;
}
/*************************************
**************************************/
@media screen and (max-width: 60.75em){
	.scene {
		float: none;
		margin: 30px auto 60px;
	}
}