Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

第 109 期(W3C标准-CSS-动画):翻转缩放动画 #112

Copy link
Copy link
@wingmeng

Description

@wingmeng
Issue body actions

CSS 函数 scale() 用于定义元素的缩放值来放大或缩小元素,当其只有一个参数时,元素会等比缩放。这里有个鲜为人知的技巧是:它的参数值可以为负数。当为负数时,元素会左右、上下翻转(效果和 rotate(180deg) 一样),然后进行缩放。那如果我们定义了 scale 的值从正整数到负整数过渡会如何?效果就是实现了元素在翻转的同时缩放。

<p class="scale">The quick brown fox jumps over the lazy dog.</p>
.scale {
  font-size: 30px;
  text-align: center;

  transform: scale(1);
  animation: scale 5s infinite linear;
}

@keyframes scale {
  50% { transform: scale(-1); }
  100% { transform: scale(-1); }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.