Честно стырено с habr.
1. Верстаем основу
Для реализации слайдера нам понадобится довольно простой набор тэгов, которые будут в свою очередь отвечать за элементы слайдера.
Пример слайдера на чистом CSS3
Слайдер на чистом CSS. Пример от школы разработки интерфейсов Yandex.
Слайдер сделан с помощью связки и . Вся магия происходит на уровне селектора #button-N:checked ~ .slider-inner .slider-slides. Когда мы кликаем по одному из инпутов-чекбоксов, он переходит в состояние checked. Мы можем этим воспользоваться и назначить нужный нам translate на контейнер со слайдами: transform: translate(-33%).
HTML часть
Бургер-меню с выездом влево
Трансформация 3D карточки-поворот на 180 градусов CSS3
CSS трансформация с использованием transform
HTML часть
Адаптивная верстка
Пример на github
Читать далее «CSS трансформация с использованием transform»Переворачиваем карточку на 180 градусов с помощью CSS
Меняющийся фон сайта на градиенте
Просто добавляем в css
body{
background: linear-gradient(326deg, #316155, #5fc370, #b8c35f, #c3905f);
background-size: 800% 800%;
-moz-animation: screenplug 11s ease infinite;
-o-animation: screenplug 11s ease infinite;
animation: screenplug 11s ease infinite;}
@-webkit-keyframes screenplug {
0%{background-position:14% 0%}
50%{background-position:87% 100%}
100%{background-position:14% 0%}
}
@-moz-keyframes screenplug {
0%{background-position:14% 0%}
50%{background-position:87% 100%}
100%{background-position:14% 0%}
}
@-o-keyframes screenplug {
0%{background-position:14% 0%}
50%{background-position:87% 100%}
100%{background-position:14% 0%}
}
@keyframes screenplug {
0%{background-position:14% 0%}
50%{background-position:87% 100%}
100%{background-position:14% 0%}
}
Пример тут