Эффекты с изображениями только средствами CSS

Хорошие вещи transform и transition, жаль, мне обычно не нужны и с совместимостью у них до сих пор не всё гладко :) А вот сегодня кое-что понадобилось, оставляю памятку на будущее.

Везде показан сначала стиль, потом в этом же блоке фрагмент HTML-кода, потом эффект в работе. Может, заметка будет пополняться, если ещё что всплывёт.

Картинка поворачивается при наведении курсора мыши на заданный угол

.rotate img {
 -webkit-transition: all 0.5s ease; /* время 0.5 сек */
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 transition: all 0.5s ease;
}
.rotate img:hover {
 -webkit-transform: rotate(-30deg); /* угол -30 градусов */
 -moz-transform: rotate(-30deg);
 -o-transform: rotate(-30deg);
 -ms-transform: rotate(-30deg);
 transform: rotate(-30deg);
}

<div class="rotate">
 <img src="test.jpg" alt="test" />
</div>

Рамка и полный поворот картинки при наведении курсора

Если мы хотим, чтобы все картинки были в рамке и делали при наведении полный круг за секунду, с превращением рамки в овальную, изменится вот что:

.circle img {
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
 transition: all 1s ease;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
 border: 10px solid green; /* рамка */
 -webkit-box-shadow: 5px 5px 5px #111; /* тень */
 box-shadow: 5px 5px 5px #111;
}
.circle img:hover {
 border-radius: 50%;
 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 transform: rotate(360deg);
}

<div class="circle">
 <img src="test.jpg" alt="test" />
</div>

При наведении курсора рамка утолщается и трансформируется в "О"

Здесь для верного эффекта (в частности, вычисления размеров и не-выхода эффекта за пределы изображения) пришлось создать отдельный класс рисунков wrappedimg.

После float:left; в стиле иные браузеры, вроде IE, могут и подпакостить, так что учтите рецепты отсюда.

.wrappedimg {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
 border: 10px solid green;
 float: left;
 height: 400px;
 width: 267px;
 margin: 20px;
 overflow: hidden;
}
.focus img {
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
 transition: all 1s ease;
}
.focus img:hover {
 border: 66px solid green;
 border-radius: 50%;
}

<div class="focus">
 <img src="test.jpg" alt="test" class="wrappedimg" />
</div>

Вроде бы, учтены все варианты написания стилей в разных браузерах.

27.10.2016, 13:57 [4177 просмотров]