使用css3画一个旋转的苹果

最新推荐文章于 2022-12-17 09:18:09 发布

汉武大帝·

最新推荐文章于 2022-12-17 09:18:09 发布

阅读量205

点赞数

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

本文链接：https://blog.csdn.net/yinge0508/article/details/128152194

版权

css3 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

上图：

index.vue

<template>
  <!-- css3 转动效果 -->
  <div class="all">
    <div class="zhuandong"></div>
    <div class="xin_out">
      <div class="xin" v-for="(item,index) in 36" :style="{transform: 'rotateY('+ (index+1)*10+'deg)'}"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "zhuandong",
  data() {
    return {};
  },
  watch: {},
  created() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.all {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .zhuandong {
    width: 500px;
    height: 300px;
    border: 5px solid skyblue;
    border-radius: 20px;
    perspective: 50px;
    perspective-origin: 50px 150px;
    animation: zhuandong infinite;
    animation-duration: 10s;
  }

  @keyframes zhuandong {
    10% {
      transform: rotateZ(90deg);
    }
    20% {
      transform: rotateX(90deg);
    }
    30% {
      transform: rotateY(90deg);
    }
    40% {
      transform: rotateX(180deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
  .xin_out{
    position: relative;
    width: 600px;
    height: 500px;
    transform-style: preserve-3d;
    transform: rotateY(60deg);
    animation: xins infinite;
    animation-duration: 5s;
  .xin {
    position: absolute;
    width: 300px;
    left:300px;
    height: 500px;
    border: 5px solid red;
    border-top-left-radius: 1000px 1200px;
    border-top-right-radius: 500px 500px;
    border-bottom-right-radius: 1500px 1600px;
    transform-origin: left;
  }
    @keyframes xins {
 
    25% {
      transform: rotateY(90deg);
    }
    50% {
      transform: rotateX(180deg);
    }
    75% {
      transform: rotateY(270deg);
      transform: rotateZ(270deg);
    }
    100% {
      transform: rotateY(360deg);
    }

  }
}}
</style>