CSS3动画魔方案列

最新推荐文章于 2021-08-04 09:05:31 发布

easyClub_hanjixin

最新推荐文章于 2021-08-04 09:05:31 发布

阅读量702

点赞数 1

分类专栏： css3 文章标签：动画 css3 创意

本文链接：https://blog.csdn.net/easyClub_hanjixin/article/details/77199493

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本人属于入门水平大神
创意改变生活
点此查看效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .ul{
        width: 200px;
        margin: 100px auto;
        position: relative;
        animation: rotate 5s infinite ;
        transform-style: preserve-3d;


    }
    .ul>li{
        height: 200px;
        width:200px;
        background: yellow;
        position: absolute;
        list-style:none;
        font-size: 100px;
        text-align: center;
        line-height: 200px;
        opacity: 0.5;

    }
    .ul>li:first-child{
        background: #ac6dff;
        transform:  translateZ(100px);
    }
    .ul>li:nth-child(2){
        background: #90ff45;
        transform:  translateX(-100px) rotateY(-90deg);
    }
    .ul>li:nth-child(3){
        background: #ff67c7;

        transform:  translateX(100px) rotateY(90deg);
    }
    .ul>li:nth-child(4){
        background: #5affff;
        transform:  translateY(100px) rotateX(-90deg);
     }
    .ul>li:nth-child(5){
        background: #ffa31f;
        transform:  translateY(-100px) rotateX(90deg);
      }
    .ul>li:nth-child(6){
        transform:  translateZ(-100px) rotateY(-180deg);
        background: #22ff84;
       }

    .ul:hover>li:first-child{
        background: #ac6dff;
        transform:  translateZ(150px);
    }
    .ul:hover>li:nth-child(2){
        background: #90ff45;
        transform:  translateX(-150px) rotateY(-90deg);
    }
    .ul:hover>li:nth-child(3){
        background: #ff67c7;

        transform:  translateX(150px) rotateY(90deg);
    }
    .ul:hover>li:nth-child(4){
        background: #5affff;
        transform:  translateY(150px) rotateX(-90deg);
    }
    .ul:hover>li:nth-child(5){
        background: #ffa31f;
        transform:  translateY(-150px) rotateX(90deg);
    }
    .ul:hover>li:nth-child(6){
        transform:  translateZ(-150px) rotateY(-180deg);
        background: #22ff84;
    }
   @keyframes rotate {
       100%{
           transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);

       }

   }
  .ul2{
      height: 100px;
      width:100px;
      position: relative;
      top: 50px;
      left: 50px;
      list-style:none;
      font-size: 50px;
      text-align: center;
      line-height: 100px;
      transform-style: preserve-3d;
  }
  .ul2>li{
      position: absolute;
      width: 100px;
      height: 100px;
  }
    .ul2>li:first-child{
        background: url("魔方.png");
        background-size:100%;
        transform:  translateZ(50px);
    }
    .ul2>li:nth-child(2){
        background: url("魔方2.png");
        background-size:100%;
        transform:  translateX(-50px) rotateY(-90deg);
    }
    .ul2>li:nth-child(3){
        background: url("魔方3.png");
        background-size:100%;
        transform:  translateX(50px) rotateY(90deg);
    }
    .ul2>li:nth-child(4){
        background: url("魔方4.png");
        background-size:100%;
        transform:  translateY(50px) rotateX(-90deg);
    }
    .ul2>li:nth-child(5){
        background: url("魔方5.png");
        background-size:100%;
        transform:  translateY(-50px) rotateX(90deg);
    }
    .ul2>li:nth-child(6){
        transform:  translateZ(-50px) rotateY(-180deg);
        background: url("魔方6.png");
        background-size:100%;
    }


</style>
<body>
<ul class="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <ul class="ul2">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</ul>
</body>
</html>

easyClub_hanjixin

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画魔方案列

本人属于入门水平大神创意改变生活点此查看效果html>html lang="en">head> meta charset="UTF-8"> title>Titletitle>head>style> *{ padding: 0; margin: 0; } .ul{ width: 2
复制链接

扫一扫