CSS3的transform属性实现旋转正方体

最新推荐文章于 2024-07-26 09:56:47 发布

霜月枫桥

最新推荐文章于 2024-07-26 09:56:47 发布

阅读量3.4k

点赞数 1

分类专栏： CSS&CSS3 Web前台demo小记

本文链接：https://blog.csdn.net/MOONCOM/article/details/76421079

版权

CSS&CSS3 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

Web前台demo小记

22 篇文章 3 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
  <style>
  ul{
    position:relative;
    height:300px;
    width:300px;
    list-style:none;
    margin:100px auto;
    transform-style:preserve-3d;
    animation:ani 4s linear 0s infinite;
  }
  li{
    position:absolute;
    height:300px;
    width:300px;
    font-size:5em;
    text-align:center;
    line-height:300px;
    backface-visibility: hidden;
  }
  li:nth-child(1){
    background-color: green;
    transform: translateZ(150px); 
  }
  li:nth-child(2){
    background-color:yellow;
    transform: rotateY(90deg) translateZ(150px);
  }
  li:nth-child(3){
    background-color:orange;
    transform: rotateX(90deg) translateZ(150px);
  }
  li:nth-child(4){
    background-color:red;
    transform: rotateX(-90deg) translateZ(150px);
  }
  li:nth-child(5){
    background-color:blue;
    transform: rotateY(-90deg) translateZ(150px);  
  }
  li:nth-child(6){
    background-color:purple;
    transform: rotateX(180deg) translateZ(150px);
  }

  @keyframes ani{
    
    100%{
      transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
  }
  </style>

</body>
</html>

实现效果图如下所示：