css制作旋转图片

最新推荐文章于 2024-05-31 10:24:04 发布

WinFang5

最新推荐文章于 2024-05-31 10:24:04 发布

阅读量163

点赞数

分类专栏： Html5+Css3+移动Web_前端入门文章标签： html css

本文链接：https://blog.csdn.net/weixin_51061595/article/details/120870018

版权

Html5+Css3+移动Web_前端入门专栏收录该内容

23 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!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>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;

    }

    body {
      /* perspective: 1000px; */
    }

    .bigBox {
      perspective: 1000px;
    }

    section {
      position: relative;
      width: 220px;
      height: 124px;
      margin: 100px auto;
      transform-style: preserve-3d;
      animation: rotate 5s linear infinite;
      background: url(image/seven.jpeg);
    }

    section div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

    }

    @keyframes rotate {
      0% {
        transform: rotateY(0);
      }

      100% {
        transform: rotateY(360deg);
      }
    }

    section div:nth-child(1) {
      transform: translateZ(220px);
      background: url(image/one.jpeg) no-repeat;
    }

    section div:nth-child(2) {
      transform: rotateY(60deg) translateZ(220px);
      background: url(image/two.jpg) no-repeat;
    }

    section div:nth-child(3) {
      transform: rotateY(120deg) translateZ(220px);
      background: url(image/three.jpeg) no-repeat;
    }

    section div:nth-child(4) {
      transform: rotateY(180deg) translateZ(220px);
      background: url(image/four.jpeg) no-repeat;
    }

    section div:nth-child(5) {
      transform: rotateY(240deg) translateZ(220px);
      background: url(image/five.jpeg) no-repeat;
    }

    section div:nth-child(6) {
      transform: rotateY(300deg) translateZ(220px);
      background: url(image/six.jpeg) no-repeat;
    }
  </style>
</head>

<body>
  <div class="bigBox">
    <section>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </section>
  </div>
</body>

</html>

我遇到的问题：
我给 body 加 perspective的时候实现不了透视功能，然后我就把 perspective 给section
发现透视可以用，但是效果却和我预想的不一样，
最后我就给 section 再加一个盒子，把 perspective 给这个大盒子，最后实现了这个功能

我也找过为什么 body 给 perspective 却实现不了，但是最后还是没找着为啥？

有大佬知道的话，告诉我一声，嘻嘻！！！谢谢

WinFang5

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
css制作旋转图片

<!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>Document&.
复制链接

扫一扫