H5立方体特效源代码分享

最新推荐文章于 2021-06-10 16:44:20 发布

爱学习的小肥猪

最新推荐文章于 2021-06-10 16:44:20 发布

阅读量279

点赞数

分类专栏： Java

本文链接：https://blog.csdn.net/heima201907/article/details/105089323

版权

Java 专栏收录该内容

304 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
      .box{
         width: 300px;
         height: 300px;
         margin: 150px auto;
         position: relative;
         transform-style: preserve-3d;
         font-size: 40px;
         transform: rotateX(45deg) rotateY(45deg) ;
         animation: rotate 8s linear infinite ;
      }
      .box>div{
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         opacity: .5;
      }

      .box .front{
         background-color: red;
         transform:  translateZ(150px);
      }
      .box .back{
         background-color: orange;
         transform: rotateY(180deg) translateZ(150px);
      }
      .box .left{
         background-color: yellow;
         transform: rotateY(-90deg) translateZ(150px);
      }
      .box .right{
         background-color: green;
         transform: rotateY(90deg) translateZ(150px);
      }
      .box .top{
         background-color: #CC00FF;
         transform: rotateX(90deg) translateZ(150px);
      }
      .box .bottom{
         background-color: blue;
         transform: rotateX(-90deg) translateZ(150px);
      }

      @keyframes rotate {
         from{
              transform: rotateY(30deg) rotateX(-30deg);
         }
         to{
              transform: rotateY(390deg) rotateX(-30deg);
         }
      }
  </style>
</head>
<body>
<div class="box">
<div class="front">正面</div>
<div class="back">背面</div>
<div class="left">左边</div>
<div class="right">右边</div>
<div class="top">上边</div>
<div class="bottom">下边</div>
</div>
<script>
</script>
</body>
</html>

爱学习的小肥猪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5立方体特效源代码分享

<!DOCTYPEhtml><html><headlang="en"> <metacharset="UTF-8"> <title></title> <style> .box{ width:300px; height:300px...
复制链接

扫一扫