CSS Hover анимация (transform-3D) блока


Ниже размещены несколько примеров hover-эффектов с использованием css-свойства transform 3D для блока и/или изображения. В описание демо-примеров указаны только основные значения для выполнения анимации.
Кувшинка белая
<div id="demo1">
   <img src="images/kuvshinka-belaya.jpg"
id="image1" alt="Кувшинка белая">
   </div>
</div>
#demo1 {
   position: absolute;
  
perspective: 1000px;
}
#image1 {
   transform-style: preserve-3d;
  
box-shadow: 0 0 5px rgba(0,0,0,0.5);
  
transition: transform 1000ms ease 0ms, box-shadow 1000ms ease 0ms;
}
#image1:hover {
  
transform: rotateX(0deg) rotateY(180deg);
  
box-shadow: 0px 15px 30px rgba(0,0,0,0.1);
  
transition: transform 1000ms ease 0ms, box-shadow 1000ms ease 0ms;
}
Храм Василия Блаженного
<div id="wb_demo2">
<img src="
images/hram-vasiliya-blazhennogo.jpg" id="demo2" alt="Храм">
   </div>
</div>
#demo2 {
   transform-style: preserve-3d;
  
transform: perspective(400px) rotateX(60deg);
  
box-shadow: 0 0 5px rgba(0,0,0,0.5);
  
transition: transform 1000ms ease 0ms, box-shadow 1000ms ease 0ms;
}
#demo2:hover {
 
transform: rotateX(0deg);
  
box-shadow: 0px 15px 30px rgba(0,0,0,0.1);
  
transition: transform 1000ms ease 0ms, box-shadow 1000ms ease 0ms;
}
<div id="demo3">
   <div id="
chb">
   </div>
</div>
#demo3 {
   position: absolute;
   width: 660px;
   height: 260px;
  
perspective: 2000px;
  
background-image: url(../images/cvetnoe-foto-hrama.jpg);
   background-position: right top;
}
#chb {
   position: absolute;
   width: 660px;
   height: 260px;
   transform-style: preserve-3d;
  
transform-origin: 50% 0%;
  
background-image: url(../images/seroe-foto-hrama.jpg);
   background-position: right top;
   transition: transform 1000ms linear 0ms;
}
#chb:hover {
  
transform: rotateX(0deg) rotateY(-180deg);
  
transition: transform 1000ms linear 0ms;
}
Блок для контента: текста, ссылок, изображения.
Не работает в браузере Internet Explorer
<div id="demo4">
   <div id="
transform">
      <div id="
zad">
         <span>
Блок для контента: текста, ссылок, изображения.</span></div>
      <div id="
pered"></div>
   </div>
</div>
#demo4 {
   position: absolute;
   background-color: transparent;
  
perspective: 1000px;
}
#transform {
   position: absolute;
   background-color: transparent;
   transform-style: preserve-3d;
  
transform-origin: 50% 0%;
  
transform: rotateY(0);
  
transition: transform 1000ms linear 0ms;
}
#zad {
   position: absolute;
   background-color: #FFFFFF;
   border: 1px #FFFFFF solid;
 
transform: rotateY(180deg);
  
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
#pered {
   position: absolute;
   background-image: url(../images/kuvshinka-belaya.jpg);
  
backface-visibility: hidden;
  
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
#transform:hover {
  
transform: rotateX(0deg) rotateY(180deg);
  
transition: transform 1000ms linear 0ms;
}