纯CSS实现正方体旋转效果

最新推荐文章于 2024-04-10 09:21:27 发布

嗜码者

最新推荐文章于 2024-04-10 09:21:27 发布

阅读量3.4k

点赞数 6

分类专栏： css学习文章标签： css 物体旋转特效

本文链接：https://blog.csdn.net/qq_40704596/article/details/89007613

版权

css学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果如图：鼠标hover到物体上时出现特效！

源码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超绚丽CSS3多色彩发光立方体旋转动画</title>

<style>
*{
      margin:0 auto;
      padding:0;
    }
    html{
      background:#222;
    }
    div.wrap{
      width:200px;
      perspective:1000px;/*景深*/
      position:absolute;
      left:50%;
      top:50%;
      transform: translateX(-50%) translateY(-50%);/*利用位移来处理垂直水平居中*/
    }
    .wrap>div.cube{
      width:200px;
      height:200px;
      position:relative;
      transform-style: preserve-3d;
      transform:rotateX(-50deg) rotateY(-50deg) rotateZ(0deg);/*旋转*/
      animation:move 8s infinite linear;/*动画*/
    }
    /*关键帧*/
    @keyframes move{
      0% {
        transform: rotateX(0deg) rotateY(0deg);
      }
      100% {
        transform: rotateX(360deg) rotateY(360deg);
      }
    }
    .cube>div{
      width:100%;
      height:100%;
      border-radius:20px;
      position:absolute;
      background:#000;
      box-shadow:0 0 10px currentColor;/*currentColor关键字的使用值是 color 属性值的计算值*/
      transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;/*过渡 属性 时间 过渡曲线*/
    }
    .cube:hover>div{
      background:currentColor;
      box-shadow:0 0 20px currentColor;
    }
    .cube div.out-front{
      color: deeppink;
      transform:translateZ(100px);/*转换  位移*/
    }
    .cube div.out-back{
      color: seagreen;
      transform:translateZ(-100px) rotateY(180deg);/*转换 位移 旋转*/
    }
    .cube div.out-left{
      color: skyblue;
      transform:translateX(-100px) rotateY(-90deg);
    }
    .cube div.out-right{
      color: lightcoral;
      transform:translateX(100px) rotateY(90deg);
    }
    .cube div.out-top{
      color: mediumseagreen;
      transform:translateY(-100px) rotateX(90deg);
    }
    .cube div.out-bottom{
      color: dodgerblue;
      transform:translateY(100px) rotateX(-90deg);
    }
</style>
</head>
<body>
</div>
      <div class="wrap">
          <div class="cube">
            <div class="out-front"></div>
            <div class="out-back"></div>
            <div class="out-left"></div>
            <div class="out-right"></div>
            <div class="out-top"></div>
            <div class="out-bottom"></div>
          </div>
      </div>
    </body>
</html>

嗜码者

关注

6
点赞
踩
13

收藏

觉得还不错? 一键收藏
3
评论
纯CSS实现正方体旋转效果

效果如图：鼠标hover到物体上时出现特效！源码如下<!doctype html><html><head><meta charset="utf-8"><title>超绚丽CSS3多色彩发光立方体旋转动画</title><style>*{ margin:0 auto; ...
复制链接

扫一扫