Mavrikii
Platinum Member | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
zolga7
http://codepen.io/anon/pen/aBrEJe
Код: .transition(...) {
transition: @arguments;
-moz-transition: @arguments;
-webkit-transition: @arguments;
-o-transition: @arguments;
}
.transform(@transforms: 0) when not (@transforms = 0) {
-moz-transform+_: @transforms;
-o-transform+_: @transforms;
-webkit-transform+_: @transforms;
transform+_: @transforms;
}
.shadow(@shadow) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
.rotate(@deg: 0) {
.transform(rotate(@deg));
}
.scale(@x, @y) {
.transform(scaleX(@x) scaleY(@y));
}
.scale(@sc) {
.transform(scale(@sc));
}
.main(@side: 200px, @color: #ccc, @scale: 1, @angle: -25deg) {
width: @side;
height: @side;
.rotate(@angle);
.scale(@scale);
.shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
background-color: @color;
.transition(all 1s);
&:hover {
.rotate(0deg);
.scale(1.5);
.shadow(5px 0px 5px rgba(0, 0, 0, 0.5))
}
}
.paper {
.main;
} |
ну и можно добавить положение дива (либо запихнуть его в родителя), чтобы не сидел в углу. |
Всего записей: 15114 | Зарегистр. 20-09-2014 | Отправлено: 01:26 25-12-2016 | Исправлено: Mavrikii, 01:43 25-12-2016 |
|
