Страница 1 из 11
Форум про uCoz » Раздел для uCoz » Другие скрипты для uCoz » Блок информации с переворотом для сайта
Блок информации с переворотом для сайта
VIP36RUS
Дата: Вторник, 15.08.2017, 21:35 | Сообщение # 1
Проверенные
Сообщений:94
Награды: 3


Блок на сайт, что содержит информацию и с функцией переворота, что смотрится красиво если установить в профиля пользователя, что характерно с выводом информации зарегистрированного пользователя на сайте.

По умолчанию идет:



При наведение происходит эффект с переворотом:



Делал блок опять же для себя в необходимой потребности.
Смотрелось бы шикарно в профилях пользователя там где информация о пользователе.

Демонстрация блока

В CSS
Код
/* Блок информации с переворотом */
.bg-top {
    padding: 0;
    margin: 0 auto;
}

.flips-container:hover .backs {
  transform: rotateX(0deg);
    }
    .flips-container:hover .fronts {
     transform: rotateX(180deg);
    }

.flips-container, .fronts, .backs {
    width: 100%;
    height: 315px;
    margin: 0px 0px;
    display: inline-block;
}

.flippers {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

.fronts {
    z-index: 2;
    transform: rotateX(0deg);
}

.fronts, .backs {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
}

.topss {
    display: inline-block;
    width: 100%;
    height: 300px;
    background: #FFF;
    border-bottom: 4px solid rgba(222, 93, 38, 1.6);
    border-top: 4px dotted rgba(222, 93, 38, 1.6);
}

.tops-cursor {
    background: url(http://ipsguru.ru/banners/0000FF.png) repeat; color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    position: absolute;
    bottom: -10px;
    left: 0px;
    height: 30px;
    line-height: 30px;
    box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.75);
    border-radius: 3px;
    padding: 0 5px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 1);
    font-weight: normal;
    font-style: italic;
}

.tops-img {
    width: 100%;
    height: 322px;
    margin: 0 auto;
}

.tops-img {
width:auto;
height: 322px;
margin:0 auto;
}

.tops-img img {
width:100%;
height: 322px;
}

.tops-ico {
  position:absolute;
  top:6px;
  left:5px;
}
.tops-ico img {}

.backs {  
    background: url(http://www.niceimage.ru/pic/201305/2560x1440/niceimage.ru-54161.jpg) repeat; color: #fff;
    transform: rotateX(-180deg);
    border-bottom: 4px solid rgba(29,84,167,0.7);
    border-top: 4px solid rgba(29,84,167,0.7);
}

.tops-line1{
width:100%;
padding:0 0 0 0px;
height:30px;
line-height:30px;
margin:2px 0;
}

.tops-line2,.tops-line3,.tops-line4{
width:100%;
padding:20px 0 0 10px;
height:30px;
line-height:30px;
margin:2px 0;
}

.tops-line3 a {font-size:11px;color:#2C3E50;}
.tops-line4 a {}

.allert-success {
    color: #34495e;
    background-color: #A5B0B6;
    border-color: #d6e9c6;
}
.allert {
    padding: -4px;
    margin-bottom: 20px;
    border: 0px solid transparent;
    border-radius: 4px;
    left:-5px;
}
.text-center {
    text-align: center;
}
/* Блок информации с переворотом конец */


В нужное место или блок
Код
<h3 class="ipsWidget_title ipsType_reset">IPSGuru.RU - Деманстративный блок</h3>

<div class=" bg-top"="">  
<div class="flips-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flippers">
  <div class="fronts">
   <div class="topss">
<div class="tops-cursor">Наведите курсор мыши на изображение</div>
<div class="tops-img"><img class="img_mp" src="/banners/bg_1.jpg" alt=""></div>
<div class="tops-ico">
<i class="fa fa-university" aria-hidden="true"></i>
<span class="label label-primary">IPSGuru.Ru</span>
</div>
</div>
  </div>
  <div class="backs">
<div class="tops-line1">
<div class="allert allert-success block-inner text-center">Короткое предложение.</div></div>   
          
<div class="tops-line2">#1 Строка с одинаковым классом CSS</div>                    
<div class="tops-line3">Специально для пользователей IPSGuru.Ru - Бесплатный код купона <b>si48sdmm61</b> на 30% скидку при оплате 100 рублей от хостинга MyHost.Su</div>
          
<div class="IPSG_Contacts_block">
<div style="position: absolute;top: 230.0px;left: 1%;"><a href="http://ipsguru.ru/" _title="Сообщество веб администраторов"><img src="http://ipsguru.ru/banners/zel468.gif" style="border: none;" alt="Хостинг игровых серверов" /></a>
</div>
</div>         
</div>
</div>  
    </div></div>


Самые основные значения transform.

none - отсутствие преобразований (по умолчанию включено оно);
matrix(x,x,x,x,x,x) - преобразование 2D с помощью матрицы из 6 значений;
matrix3d(x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x) - преобразование 3D с помощью матрицы из 16 значений;
translate3d(x,y,z) - перемещение 3d (по сравнению с обычным перемещением, здесь добавлена еще третья координата);
scale3d(x,y,z) - масштабирование в 3d (по сравнению с обычным масштабированием, здесь добавлена еще третья координата);
rotate3d(x,y,z) - вращение в 3d (по сравнению с обычным вращением, здесь добавлена еще третья координата);
rotateX(x) - 3d вращение по оси X;
rotateY(x) - 3d вращение по оси Y;
rotateZ(x) - 3d вращение по оси Z;
perspective(n) - перспектива для преобразования 3D элемента;

Что бы изменить эффект меняем в CSS rotateX на rotateY и т.д.
Прикрепления: 7670417.jpg(116Kb) · 0105795.png(174Kb)


IPSGuru.RU - Сообщество веб администраторов
Zone-CS.RU - Проект игровых серверов Counter Strike
ClubCheats.RU - Читы для игр
Страна: (RU)
Kosten
Дата: Вторник, 15.08.2017, 21:46 | Сообщение # 2
Администраторы
Сообщений:15490
Награды: 50


VIP36RUS, а почему под пользователя, просто вижу как можно поставить на вид материала, что наведешь и там будет краткое описание.
Страна: (RU)
VIP36RUS
Дата: Вторник, 15.08.2017, 21:53 | Сообщение # 3
Проверенные
Сообщений:94
Награды: 3


Цитата Kosten ()
VIP36RUS, а почему под пользователя, просто вижу как можно поставить на вид материала, что наведешь и там будет краткое описание.

Можно хоть куда воткнуть, просто для примера )


IPSGuru.RU - Сообщество веб администраторов
Zone-CS.RU - Проект игровых серверов Counter Strike
ClubCheats.RU - Читы для игр
Страна: (RU)
Kosten
Дата: Вторник, 15.08.2017, 21:54 | Сообщение # 4
Администраторы
Сообщений:15490
Награды: 50


VIP36RUS, но он больше информационный блок, что можно отвести категорию. примерно новости и там поставить, первая будет афиша, что потом наведут и там будет информация.
Страна: (RU)
Форум про uCoz » Раздел для uCoz » Другие скрипты для uCoz » Блок информации с переворотом для сайта
Страница 1 из 11
Поиск: