CSS做一个翻书动画

最新推荐文章于 2024-05-11 09:11:41 发布

酷码66

最新推荐文章于 2024-05-11 09:11:41 发布

阅读量320

点赞数

分类专栏： css 文章标签： css3 前端 css

本文链接：https://blog.csdn.net/qq_61919625/article/details/129762800

版权

什么是transition？

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。

css属性值更改后，浏览器会立即更新相应的样式。

transition-property
transition-duration
transition-timing-function
transition-delay

语法：

transition: property duration timing-function delay;

  <!-- 
    transition 过渡
    transform 转换
    移动 translate
    缩放 scale
    旋转 rotate
    倾斜 skew
    3d 书
    3. 关键帧动画@keyframes
    animation

  -->
  <div class="box">
    <div class="item"></div>
    <p>文字</p>
  </div>

    * {
      margin: 0;
    }
    .box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 200px;
      height: 350px;
      perspective: 500px;
    }
    .item {
      width: 200px;