zoukankan      html  css  js  c++  java
  • 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</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        @keyframes containerRotate {
          0% {
            /* background: pink; */
            transform: rotateZ(-45deg) rotateX(45deg) rotateY(45deg);
           
          }
          50% {
            transform:rotateZ(45deg) rotateX(45deg) rotateY(750deg);
          }
          100% {
            transform:rotateZ(45deg) rotateX(45deg) rotateY(45deg);
          }
        }
        body   {
          background: rgb(221, 217, 217);
          overflow: hidden;
          padding-top:calc((100vh - 600px) / 2);
        }
        .container {
          /* background: rgba(255, 192, 203, 0.301); */
          100px;
          height: 500px;
          margin: 0 auto;
          transform-origin:50px 250px -50px;
          transform:   rotateZ(-45deg) rotateX(45deg) rotateY(45deg);
          transform-style: preserve-3d;
          animation: containerRotate ease 10s infinite;
        }
       
        .container>div {
          100px;
          height: 100px;
          line-height: 100px;
          background: rgba(255,255,255,.2);
          filter: blur(1px);
          margin: 0 auto;
          box-shadow: .1rem .1rem 5px rgba(88, 85, 85, 0.363);
          box-sizing: border-box;
          text-align: center;
        }
        #top {
          transform-origin: 50px 100px;
          transform: rotateX(90deg);
        }
        #opposite {
          position: relative;
          top: 200px;
          transform: translateZ(-100px);
        }
        #bottom {
          transform-origin: 50px 0;
          transform: rotateX(-90deg);
        }
        #left {
          position: relative;
          bottom: 200px;
          right: 100px;
          transform-origin: 100px 50px;
          transform: rotateY(-90deg);
        }
        #right {
          position: relative;
          bottom: 300px;
          left: 100px;
          transform-origin: 0 50px;
          transform: rotateY(90deg);
        }
      </style>
    </head>
    <body>
      <div class="container">
        <div id="opposite">对</div>
        <div id="top">顶</div>
        <div id="front">正</div>
        <div id="bottom">底</div>
        <div id="left">左</div>
        <div id="right">右</div>
      </div>
       
    </body>
    </html>
  • 相关阅读:
    MongoDB的复合唯一索引
    MongoDB实战读书笔记(二):面向文档的数据
    MongoDB实战读书笔记(一):JavaScript shell操作MongoDB
    JAVA8的java.util.function包
    (转)mongoDB 禁用大内存页面 transparent_hugepage=never
    (转)Centos5.5安装MONO2.10.8和Jexus 5.0开启Linux平台.net应用新篇章
    (转)IIS7 优化-网站请发并发数
    (转)IIS设置优化(需根据服务器性能,调整具体参数值)
    逻辑架构和物理架构(转)
    (转)国内外三个不同领域巨头分享的Redis实战经验及使用场景
  • 原文地址:https://www.cnblogs.com/diligent-noob/p/15508082.html
Copyright © 2011-2022 走看看