Site icon Vavik96

CSS3 Эффект масштабирования и наклона

admin

CSS анимации действительно удивительны, они плавные, и требует меньше кодирования, чем JavaScript или flash. Все современные браузеры поддерживают CSS3 переходы и анимации.
В этом уроке мы будем использовать новые замечательные CSS3 функции и возможности, мы добавим плавную фоновую анимацию и интересный эффект наклона и масштабирования, применяя его к контейнеру DIV и его содержимому при наведении мышью.
Фон анимация работает непрерывно и эффект Масштабирование / вращение вызвается наведением мыши на родительский DIV, давайте посмотрим как это делается!

HTML – разметка

<div class="dAnim">
    <div>
         <img src="i2.jpg" />
         <div>
             Here's another picture
             <div>
                 yes, It's awesome too
             </div>
         </div>
    </div>
</div>

Css будет выполняться по каждому DIV в DOM элементов, имеющих класс с именем “dAnim”. Все дивы внутри этого родительского DIV будет иметь различный эффект (наклон в противоположном направлении), то, как Вы размещаете DIV будет иметь влияние на конечный результат, например, если дивы вложены, они будут иметь кумулятивный эффект вращения. Это означает, что каждый DIV будет иметь наклон в -2 ступени относительно родительского DIV.

CSS:

.dAnim
{
    padding:5px;
    font-family:Georgia,Verdana;
    border:1px solid #bbb;
    display:inline-block;
    position:relative;

    /* on Mouseout animation */
    /* The -webkit- and -ms- vendor prefixes are added */
    /* for chrome and ie10+ comptability */
    transition: transform .2s ease-out;  
    -webkit-transition: -webkit-transform 0.2s ease-out;
    -ms-transition: -ms-transform .2s ease-out;

    transform: scale(1) rotate(0deg);
    -webkit-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);

    /* CSS3 Stripes as a Background Image*/
    background-image: linear-gradient(135deg,#c2c2c2 25%,#dadada 25%,#dadada 50%, #c2c2c2 50%, #c2c2c2 75%,#dadada 75%,#dadada 100%);
    background-image: -moz-linear-gradient(135deg,#c2c2c2 25%,#dadada 25%,#dadada 50%, #c2c2c2 50%, #c2c2c2 75%,#dadada 75%,#dadada 100%);
    background-image: -ms-linear-gradient(135deg,#c2c2c2 25%,#dadada 25%,#dadada 50%, #c2c2c2 50%, #c2c2c2 75%,#dadada 75%,#dadada 100%);
    background-image: -o-linear-gradient(135deg,#c2c2c2 25%,#dadada 25%,#dadada 50%, #c2c2c2 50%, #c2c2c2 75%,#dadada 75%,#dadada 100%);
    background-image: -webkit-gradient(linear, 100% 100%, 0 0,color-stop(.25, #dadada), color-stop(.25, #c2c2c2),color-stop(.5, #c2c2c2),color-stop(.5, #dadada),color-stop(.75, #dadada),color-stop(.75, #c2c2c2),color-stop(1, #c2c2c2));
    background-image: -webkit-linear-gradient(135deg,#c2c2c2 25%,#dadada 25%,#dadada 50%, #c2c2c2 50%, #c2c2c2 75%,#dadada 75%,#dadada 100%);
    background-size: 40px 40px;
        
    /* Background stripes animation */
    animation: bganim 3s linear 2s infinite;
    -webkit-animation: bganim 3s linear 2s infinite;
    -ms-animation: bganim 3s linear 2s infinite;

    z-index:98;
}

@keyframes bganim { from {background-position:0px;} to { background-position:40px;} }
@-webkit-keyframes bganim { from {background-position:0px;} to { background-position:40px;} }
@-ms-keyframes bganim { from {background-position:0px;} to { background-position:40px;} }
 
.dAnim:hover
{
    /* The hovered element needs to be the top element */
    z-index:99;
  
    /* Main div mouseover animation */
    transform: scale(1.3) rotate(2deg);
    -webkit-transform: scale(1.3) rotate(2deg);
    -ms-transform: scale(1.3) rotate(2deg);
}
.dAnim div
{
    border:1px solid transparent;
    background-color:white;

    /* Inside divs mouseout animation */
    transition: transform .2s ease-out;  
    -webkit-transition: -webkit-transform .2s ease-out;  
    -ms-transition: -ms-transform .2s ease-out;  

    transition-delay:.1s;
    -webkit-transition-delay:.1s;
    -ms-transition-delay:.1s;

    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
}
.dAnim:hover div
{
    border:1px solid #444;

    /* Inside divs mouseover animation */
    transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
}

Примечание: Этот метод работает в браузерах, поддерживающих CSS3 (анимация и переходы), то есть все современные браузеры, даже IE версии 10+, а так же обрабатывается старыми браузерами (только анимация не будет работать).

Оригинал / Перевод

Exit mobile version