css3 翻转动画

最新推荐文章于 2022-06-23 20:30:54 发布

原创最新推荐文章于 2022-06-23 20:30:54 发布 · 401 阅读

0 ·

CC 4.0 BY-SA版权

css 同时被 2 个专栏收录

3 篇文章

订阅专栏

html

3 篇文章

订阅专栏

这篇博客展示了如何利用CSS3的@keyframes、perspective和角度旋转属性创建一个3D翻转动画。通过一个简单的HTML和CSS代码示例，作者详细解释了如何设置动画关键帧和应用变换来实现元素的翻转效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要是用css3动画 animation 结合perspective跟角度旋转来做

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css3 翻转动画</title>
    <style>
      body {
        width: 500px;
        height: 500px;
        background: rebeccapurple;
      }
      @keyframes rotateplane {
        0% {
          -webkit-transform: perspective(120px);
        }
        50% {
          -webkit-transform: perspective(120px) rotateY(180deg);
        }
        100% {
          -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
        }
      }
      @-webkit-keyframes rotateplane {
        0% {
          -webkit-transform: perspective(120px);
        }
        50% {
          -webkit-transform: perspective(120px) rotateY(180deg);
        }
        100% {
          -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
        }
      }
      .content-spinkit {
        width: 60px;
        height: 60px;
        background-color: #fff;
        display: inline-block;
        -webkit-animation: rotateplane 1.2s infinite ease-in-out;
        animation: rotateplane 1.2s infinite ease-in-out;
      }
    </style>
  </head>
  <body>
    <div class="content-spinkit"></div>
  </body>
</html>