上图:
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>