Как включить новый дизайн сервиса YouTube

Дизайнеры Google постоянно трудятся над обновлением многочисленных сервисов компании. Иногда эти изменения бывают малозначимыми и малозаметными, а иногда полностью преображают внешний вид продукта.

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

Для оценки грядущих изменений просто кликните на эту картинку. На её обратной стороне вы увидите новый YouTube..lh-flipping-cards__flip-container { -webkit-perspective: 2000px; -o-perspective: 2000px; perspective: 2000px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; cursor: pointer; margin: 60px auto; position: relative; } .lh-flipping-cards__flip-container:hover .lh-flipping-cards__icon { opacity: 1; } .lh-flipping-cards__icon { position: absolute; width: 50px; left: 20px; top: 20px; z-index: 10; opacity: 0; transition: opacity 300ms; } @media (max-width:480px) { .lh-flipping-cards__icon { width: 20px; left: 10px; top: 10px; } } .lh-flipping-cards__flip-container, .lh-flipping-cards__front, .lh-flipping-cards__back { width: 100%; } .lh-flipping-cards__flipper { transition: all 500ms; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; } .lh-flipping-cards__front, .lh-flipping-cards__back { display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: all 500ms; } .lh-flipping-cards__front { z-index: 2; -webkit-transform: rotateY(0); transform: rotateY(0); position: absolute; left: 0; top: 0; } .lh-flipping-cards__back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .lh-flipping-cards__big-image { width: 100%; } .lh-flipping-cards__text-wrapper { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .lh-flipping-cards__text { padding: 0 50px; margin: 0 auto; color: #eeeeee; max-width: 920px; text-align: center; font-weight: 300; font-size: 19px; } .lh-flipping-cards__flip-container.click .lh-flipping-cards__flipper { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } /* IE10-11 */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .lh-flipping-cards__flip-container.click .lh-flipping-cards__front { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .lh-flipping-cards__flip-container.click .lh-flipping-cards__back { -webkit-transform: rotateY(0); transform: rotateY(0); } .lh-flipping-cards__flip-container.click .lh-flipping-cards__flipper { -webkit-transform: rotateY(0); transform: rotateY(0); } }