3D вид материалов новостей для кинотеатров

$MESSAGE$

<div class="scene">  
<div class="movie" onclick="return true">
  <div class="poster" style="background-image: url($OTHER5$);"></div>
  <div class="info" style="background-image: url($IMG_URL1$);">
  <header>
  <h1>$TITLE$<br>$OTHER1$</h1>
  <span class="year">$OTHER2$</span>
  <span class="rating">$OTHER3$</span>
  <span class="duration">$OTHER4$</span>
  </header>
  <p>
  $MESSAGE$<br><a href="$ENTRY_URL$">Подробнее</a>
  </p>
  </div>
  </div>
  </div>

/*************************************
Build the scene and rotate on hover
**************************************/

.scene {
  width: 260px;
  height: 370px;
  margin: 30px;
  float: left;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}

.movie {
  width: 260px;
  height: 370px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(-130px);
  -moz-transform: translateZ(-130px);
  transform: translateZ(-130px);
  -webkit-transition: -webkit-transform 350ms;
  -moz-transition: -moz-transform 350ms;
  transition: transform 350ms;
}

.movie:hover {
  -webkit-transform: rotateY(-78deg) translateZ(20px);
  -moz-transform: rotateY(-78deg) translateZ(20px);
  transform: rotateY(-78deg) translateZ(20px);
}

/*************************************
Transform and style the two planes
**************************************/

.movie .poster,  
.movie .info {
  position: absolute;
  width: 260px;
  height: 370px;
  background-color: #fff;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.movie .poster {
  -webkit-transform: translateZ(130px);
  -moz-transform: translateZ(130px);
  transform: translateZ(130px);
  background-size: cover;
  background-repeat: no-repeat;
}

.movie .info {
  -webkit-transform: rotateY(90deg) translateZ(130px);
  -moz-transform: rotateY(90deg) translateZ(130px);
  transform: rotateY(90deg) translateZ(130px);
  border: 1px solid #B8B5B5;
  font-size: 0.8em;
  text-align: justify;
  font-family: Tahoma, Geneva, sans-serif;
}

/*************************************
Shadow beneath the 3D object
**************************************/

.csstransforms3d .movie::after {
  content: '';
  width: 260px;
  height: 260px;
  position: absolute;
  bottom: 0;
  box-shadow: 0 30px 50px rgba(0,0,0,0.3);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-transform: rotateX(90deg) translateY(130px);
  -moz-transform: rotateX(90deg) translateY(130px);
  transform: rotateX(90deg) translateY(130px);
  -webkit-transition: box-shadow 350ms;
  -moz-transition: box-shadow 350ms;
  transition: box-shadow 350ms;
}

.csstransforms3d .movie:hover::after {
  box-shadow: 20px -5px 50px rgba(0,0,0,0.3);
}

/*************************************
Movie information
**************************************/

.info header {
  color: #FFF;
  padding: 7px 10px;
  font-weight: bold;
  height: 165px;
  background-size: contain;
  background-repeat: no-repeat;
  text-shadow: 0px 1px 1px rgba(0,0,0,1);
}

.info header h1 {
  margin: 0 0 2px;
  font-size: 1.4em;
}

.info header .rating {
  border: 1px solid #FFF;
  padding: 0px 3px;
}

.info p {
  padding: 1.2em 1.4em;
  margin: 2px 0 0;
  font-weight: 400;
  color: #666;
  line-height: 1.4em;
  border-top: 10px solid #555;
}

/*************************************
Generate "lighting" using box shadows
**************************************/

.movie .poster,
.movie .info,
.movie .info header {
  -webkit-transition: box-shadow 350ms;
  -moz-transition: box-shadow 350ms;
  transition: box-shadow 350ms;
}

.csstransforms3d .movie .poster {
  box-shadow: inset 0px 0px 40px rgba(255,255,255,0);
}

.csstransforms3d .movie:hover .poster {
  box-shadow: inset 300px 0px 40px rgba(255,255,255,0.8);
}

.csstransforms3d .movie .info,  
.csstransforms3d .movie .info header {
  box-shadow: inset -300px 0px 40px rgba(0,0,0,0.5);
}

.csstransforms3d .movie:hover .info,  
.csstransforms3d .movie:hover .info header {
  box-shadow: inset 0px 0px 40px rgba(0,0,0,0);
}

/*************************************
Posters and still images
**************************************/
.info {
  background-repeat: no-repeat;
  background-size: 260px 185px !important;
}

.poster {
  background-repeat: no-repeat;
  background-size: 260px 370px !important;
}

/*************************************
Fallback
**************************************/
.no-csstransforms3d .movie .poster,  
.no-csstransforms3d .movie .info {
  position: relative;
}

/*************************************
Media Queries
**************************************/
@media screen and (max-width: 60.75em){
  .scene {
  float: none;
  margin: 30px auto 60px;
  }
}