สร้างเอฟเฟกต์ Rotate In Down Right ด้วย CSS Animation

เอฟเฟกต์ Rotate In Down Right

องค์ประกอบหมุนเข้ามาจากมุมขวาล่าง (bottom right) เริ่มจากหมุน 90° จางหาย → หมุน 0° มองเห็น ใช้ transform-origin: right bottom

โค้ดตัวอย่างสมบูรณ์

<html>
<head>
  <style>
    .animated {
      background-image: url(/css/images/logo.png);
      background-repeat: no-repeat;
      background-position: left top;
      padding-top: 95px;
      margin-bottom: 60px;
      -webkit-animation-duration: 10s;
      animation-duration: 10s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }

    @-webkit-keyframes rotateInDownRight {
      0%   { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; }
      100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; }
    }
    @keyframes rotateInDownRight {
      0%   { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; }
      100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; }
    }

    .rotateInDownRight {
      -webkit-animation-name: rotateInDownRight;
      animation-name: rotateInDownRight;
    }
  </style>
</head>
<body>
  <div id="animated-example" class="animated rotateInDownRight"></div>
  <button onclick="myFunction()">Reload page</button>
  <script>
    function myFunction() { location.reload(); }
  </script>
</body>
</html>

การวิเคราะห์

ครอบครัว Rotate In (4 มุม)

/ transform-origin และ rotate เริ่มต้น /
@keyframes rotateInDownRight  { from { transform-origin: right bottom; transform: rotate( 90deg); } to { transform-origin: right bottom; transform: rotate(0); } }
@keyframes rotateInDownLeft   { from { transform-origin: left bottom;  transform: rotate(-90deg); } to { transform-origin: left bottom;  transform: rotate(0); } }
@keyframes rotateInUpRight    { from { transform-origin: right top;     transform: rotate(-90deg); } to { transform-origin: right top;     transform: rotate(0); } }
@keyframes rotateInUpLeft     { from { transform-origin: left top;      transform: rotate( 90deg); } to { transform-origin: left top;      transform: rotate(0); } }

การใช้งานจริง: Card Reveal

.card-reveal {
  animation: rotateInDownRight 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
  transform-origin: bottom right;
}