多张图片做旋转透视的动画、perspective、animation: rotate、animation-play-state、transform、transform-style

代码如下

<template>
  <body>
    <section>
      <div><img src="./assets/images/1.jpg" alt="">div>
      <div><img src="./assets/images/2.jpg" alt="">div>
      <div><img src="./assets/images/3.jpg" alt="">div>
      <div><img src="./assets/images/4.jpg" alt="">div>
      <div><img src="./assets/images/5.jpg" alt="">div>
      <div><img src="./assets/images/6.jpg" alt="">div>
    section>
  body>
template>

<script setup>

script>



<style scoped lang="less">
body{
  perspective: 800px;
  //background-color: #ccc;
}
section {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 350px auto;
  transform-style: preserve-3d;
  animation: rotate 15s infinite linear;
  //background: url(./assets/images/7.jpg) no-repeat;
}
@keyframes rotate{
  0%{
    transform: rotateY(0);
  }
  100%{
    transform: rotateY(360deg);
  }
}
section div{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* 添加动画 */
}
section div img{
  width: 300px;
  height: 200px;

}
section:hover{
  animation-play-state: paused;
}

section div:nth-child(1){
  transform: translateZ(300px);
}
section div:nth-child(2){
  /* transform:translateX(300px) rotateY(60deg); */
  /* 先旋转 再移动 */
  transform:rotateY(60deg) translateZ(300px);
}
section div:nth-child(3){
  transform:rotateY(120deg) translateZ(300px);
}
section div:nth-child(4){
  transform:rotateY(180deg) translateZ(300px);
}
section div:nth-child(5){
  transform:rotateY(240deg) translateZ(300px);
}
section div:nth-child(6){
  transform:rotateY(300deg) translateZ(300px);
}
style>

效果如下:

会一直不停的旋转

你可能感兴趣的:(css,前端,css,css3,html)