home img transform

by weijarz

HTML

<div class="head wrapper">
  <h1>Qi Reader</h1>
  <h3>A modern web RSS Reader</h3>
</div>
<div class="wrapper">
  <img class=img src="https://netnewswire.com/images/NNW5Light.png" alt="">
</div>
<div style='height: 2500px; background: #fda'></div>

CSS

body { padding: 0; margin: 0; background: #ffffff; font-family: sans-serif; }
h1 { font-size: 72px; }
h3 { font-size: 32px; font-weight: 400; }
.head { margin: 3rem 0 2rem; }
.wrapper {
  max-width: 800px;
  padding: 0 1.5rem; 
  text-align: center; 
  perspective: 80vw;
  perspective-origin: center top;
  overflow: hidden;
}
.img {
  width: 100%;
  box-shadow: 0 50px 100px -20px rgba(50,50,93,.25),0 30px 60px -30px rgba(0,0,0,.3);
  border-radius: 8px;
  transition: all 1s;
  transform: translateX(0%) 
    rotate3d(1, 0, 0, 45deg) 
    scale3d(0.75, 0.75, 1);
}