Забыли пароль?
Запросите новый здесь.

Автор темы: Alex
ID темы: 2503
Информация:
Тема содержит 8 сообщения, была просмотрена 9143 раз.
Просмотр темы
PHP-Fusion Russia » Веб-разработка » HTML и CSS
 Распечатать тему
Переворачивание блоков на CSS3
Alex
Необходимо сделать переворачивающиеся блоки, с красивым эффектом при наведении мышью.

картинка без наведения мышью
linkme.ufanet.ru/images/bc15c31ddf9c9e96c7f70e9444c85471.png
при наведении, перевернулась и должно быть так
linkme.ufanet.ru/images/6153446323261d8dd28b54e6e5bb85cc.png

нарыл в инете код

это вставляю в доп страницу
Скачать исходники  Код

<div id='f1_container'>
    <div id='f1_card' class='shadow'>
        <div class='front face'>
            <img src='/images/01.jpg'/>
        </div>
        <div class='back face center'>
            <p>г.Нефтекамск, <br />ул. Индустриальная, 18/4 <br /><br />
<a href='proizvodstvennaya_baza_1.html' >Подробная информация о базе...</a>
 </p>
        </div>
    </div>
</div>





это в стили
Скачать исходники  Код

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 300px;
  height: 150px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -moz-transform-style:  preserve-3d;
  -ms-transform-style:  preserve-3d;
  -webkit-transform-style:  preserve-3d;
  -o-transform-style:  preserve-3d;
  transition: all 1.0s linear;
  -moz-transition: all 1.0s linear;
  -ms-transition: all 1.0s linear;
  -webkit-transition: all 1.0s linear;
  -o-transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
  transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
  -webkit-box-shadow: -5px 5px 5px #aaa;
  -moz-box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -o-backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -o-transform: rotateY(180deg); 
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}





источник данного кода http://jsfiddle.n.../znqu7nb6/ там же и в работе его можно посмотреть.

НО возникла проблема в IE 11 и опере некст не работает, в ослике картинку переворачивает но показывает не вторую часть а отражает всего лишь первую, в опере ничего не переворачивает а просто показывает вторую часть.

в исходном коде у элементов CSS3 не были прописаны
-moz-
-ms-
-webkit-
-o-

я подумав что не робит из-за этого прописал везде где смог))) не помогло...

нашел пример где это работает http://www.vim-av... смотрите зеленые блоки с ценами ниже слайдера, посмотрел исходный код вроде сделано без js, НО у них работает в осле и в опере.

Помогите кто чем может, я не прошу чтобы работало в 6 и 7 ослах, главное в последних версиях популярных браузеров
Изменил(а) Alex, 20.05.2015 17:13
 
Web
Rush
не кодер, сходу не помогу (да и осла на бубунте нету хД), но резонный вопрос - почему бы просто не выдрать с http://www.vim-avia.com/?
 
Web
Alex
Rush, пытался выдрать, но попытка закончилась не удачно
 
Web
Deorchik
Alex написал:

Rush, пытался выдрать, но попытка закончилась не удачно




я сейчас покажу как это надо делать =)) но так нельзя делать =))

Скачать исходники  Код



  //////////****   стили   *///////////

    <style type="text/css">
      .green-block {
      position: relative;
      width: 206px;
      height: 150px;
      margin: 0 0 11px 11px;
      float: left;
      }
        .green-block {
            perspective: 800px;
            -ms-perspective: 800px;
            -o-perspective: 800px;
            -moz-perspective: 800px;
            -webkit-perspective: 800px;
        }
        .green-block .top {
            transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            -o-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            -webkit-transition: -webkit-transform 0.4s ease-out;
            -moz-transition: -moz-transform 0.4s ease-out;
            -ms-transition: -ms-transform 0.4s ease-out;
            -o-transition: -o-transform 0.4s ease-out;
            transition: transform 0.4s ease-out;
        }
        .green-block .bottom {
            transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            -o-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            -webkit-transition: -webkit-transform 0.4s ease-out;
            -moz-transition: -moz-transform 0.4s ease-out;
            -ms-transition: -ms-transform 0.4s ease-out;
            -o-transition: -o-transform 0.4s ease-out;
            transition: transform 0.4s ease-out;
            transform: rotateY(180deg);
            -ms-transform: rotateY(180deg);
            -o-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
        }
        .green-block:hover .top {
            transform: rotateY(-180deg);
            -ms-transform: rotateY(-180deg);
            -o-transform: rotateY(-180deg);
            -moz-transform: rotateY(-180deg);
            -webkit-transform: rotateY(-180deg);
        }
        .green-block:hover .bottom {
            transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            -o-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
            -webkit-transform: rotateY(0deg);
        }
      .green:before, .green:after {
display: table;
content: "";
line-height: 0;
}
.green-block .bottom .descr,
.green-block .top {
   background: #2c9e52;
}
.green-block .top .gb-direction {
   color: #57f28b;
   background: url("img/arrow.png") 100% 50% no-repeat;
}

.green .green-block:nth-child(0) .top,
.green .green-block.spring-0 .top {
   background: #2c9e52 url() no-repeat 100% 0;
}
/*    green
   ----------------------------------------------------------------- */
.green {
  *zoom: 1;
  margin: 0 0 21px -11px;
  min-height: 150px;
}
.green:before,
.green:after {
  display: table;
  content: "";
  line-height: 0;
}
.green:after {
  clear: both;
}
.green .loader {
  display: block;
  margin: 43px auto;
}
.green-block {
  position: relative;
  width: 206px;
  height: 150px;
  margin: 0 0 11px 11px;
  float: left;
}
.green-block .top {
  display: block;
  position: relative;
  z-index: 2;
  width: 166px;
  height: 118px;
  padding: 17px 20px 15px;
  color: #fff;
  background: #2f945e;
  line-height: 1.2;
}
.green-block .top strong {
  display: block;
  font-family: 'open_sanssemibold';
  font-size: 16px;
  height: 38px;
  padding: 0 0 2px;
}
.green-block .top span {
  display: block;
}
.green-block .top .gb-price {
  font-family: 'open_sanslight';
  font-size: 27px;
  padding: 19px 0 8px;
}
.green-block .top .gb-price span {
  display: inline;
  font-size: 16px;
}
.green-block .top .gb-direction {
  color: #7decae;
  background: url("../img/official/green-block.gif") 100% 50% no-repeat;
  height: 19px;
}
.green-block .bottom {
  position: absolute;
  top: 0;
  right: 0;
  width: 206px;
  height: 150px;
  z-index: 1;
}
.green-block .bottom .descr {
  width: 206px;
  bottom: 0;
  position: absolute;
  background: #32945e;
  background: rgba(50, 148, 94, 0.8);
  font-size: 13px;
  padding: 1px 0;
  color: #fff;
  display: block;
  *display: none;
}
.green-block .bottom .descr .in {
  display: block;
  padding: 0 10px;
}
.green-block {
  perspective: 800px;
  -ms-perspective: 800px;
  -o-perspective: 800px;
  -moz-perspective: 800px;
  -webkit-perspective: 800px;
}
.green-block .top {
  transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.4s ease-out;
  -moz-transition: -moz-transform 0.4s ease-out;
  -ms-transition: -ms-transform 0.4s ease-out;
  -o-transition: -o-transform 0.4s ease-out;
  transition: transform 0.4s ease-out;
}
.green-block .bottom {
  transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.4s ease-out;
  -moz-transition: -moz-transform 0.4s ease-out;
  -ms-transition: -ms-transform 0.4s ease-out;
  -o-transition: -o-transform 0.4s ease-out;
  transition: transform 0.4s ease-out;
  transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}
.green-block:hover .top {
  transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
}
.green-block:hover .bottom {
  transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
}
.green .big {
  width: 314px;
}
.green .big .top {
  width: 274px;
}
.green .big .bottom {
  width: 314px;
}


 </style>

/*****////  Код *  ////


<section class="green" id="specials">
<div class="green-block snow_1" href="#">
            <a href="#" class="top">
             <strong>Москва — Кишинев</strong>
              <span class="gb-price"><span>от</span> 4 900 руб.</span>
            <span class="gb-direction">в одну сторону</span>
             </a>
             <a href="#" class="bottom">
             <img src="http://linkme.ufanet.ru/images/bc15c31ddf9c9e96c7f70e9444c85471.png" width="206" height="150" alt="Москва &amp;mdash;Кишинев">
               <span class="descr"><span class="in">Кишинев</span></span>
               </a>
                 </div>
</section>







вот на =)
x1 x1 x1 x1
 
Web
Alex
Deorchik, благодарю, в ослике заработало, в опере нет)))


Deorchik написал:
я сейчас покажу как это надо делать =)) но так нельзя делать =))

мы никому не скажем by
 
Web
Deorchik
Alex написал:
Deorchik, благодарю, в ослике заработало, в опере нет)))


не зачто, обнови еще разок F5 попробуй, у меня работает в ласт опере =))
 
Web
Alex
я вот думаю для оперы сделать через обычный :hover т.е. навел и появилась другая картинка,

можно ли сделать это только для оперы?
 
Web
Pisatel
Мб не в тему, но все же... http://dev.jonraa.../examples/
Переполз на WP, но PF - это как первая любовь, которая не забывается...
 
Web

Поделиться этой темой
Социальные закладки: Vkontakte Odnoklassniki Mail.ru Facebook Google Tweet This
URL:
BBcode:
HTML:

Перейти на форум:
Топ 5 пользователей форума
Alex Alex (1,237)   Zaxap Zaxap (1,090)   Vova Vova (877)   Pisatel Pisatel (678)   util util (666)