zoukankan      html  css  js  c++  java
  • CSS 3D transforms

    https://www.creativebloq.com/css3/20-stunning-examples-css-3d-transforms-11112759

    https://github.com/fofr/paulrhayes.com-experiments

    <!DOCTYPE html>
    <html lang="en">
    <head>  
     <!-- Hey there, thanks for looking at the source. Skip down until you see the experiment start comments -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Experiment: A tetrahedron built with CSS 3D transforms — Paul Hayes</title>
    <style type="text/css">
    
    #pyramid {
        position: relative;
        margin: 100px auto;
        height: 500px;
         100px;
        -webkit-transform-style: preserve-3d;
        -webkit-animation: spin 10s linear infinite;
        -webkit-transform-origin: 116px 200px 116px;
    
        -moz-transform-style: preserve-3d;
        -moz-animation: spin 10s linear infinite;
        -moz-transform-origin: 116px 200px 116px;
    
        -ms-transform-style: preserve-3d;
        -ms-animation: spin 10s linear infinite;
        -ms-transform-origin: 116px 200px 116px;
    
        transform-style: preserve-3d;
        animation: spin 10s linear infinite;
        transform-origin: 116px 200px 116px;
    
    }
    
    @-webkit-keyframes spin {
      from {
        -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      }
      to {
        -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
      }
    }
    
    @-moz-keyframes spin {
      from {
        -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      }
      to {
        -moz-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
      }
    }
    
    @-ms-keyframes spin {
      from {
        -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      }
      to {
        -ms-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
      }
    }
    
    @keyframes spin {
      from {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      }
      to {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
      }
    }
    
    #pyramid > div {
        position: absolute;
        border-style: solid;
        border- 200px 0 200px 346px;
        -webkit-transform-origin: 0 0;
        -moz-transform-origin:    0 0;
        -ms-transform-origin:     0 0;
        transform-origin:         0 0;
    }
    
    /* Put some text on each face */
    #pyramid > div:after {
        position: absolute;
        content: "Triangle";
        color: #fff;
        left: -250px;
        text-align: center;
    }
    
    #pyramid > div:first-child  {
        border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
        -webkit-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
        -moz-transform:    rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
        -ms-transform:     rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
        transform:         rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
    }
    
    #pyramid > div:nth-child(2) {
        border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
        -webkit-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
        -moz-transform:    rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
        -ms-transform:     rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
        transform:         rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
    }
    
    #pyramid > div:nth-child(3) {
        border-color: transparent transparent transparent rgba(50, 50, 50, 0.9);
        -webkit-transform: rotateX(60deg) rotateY(19.5deg);
        -moz-transform:    rotateX(60deg) rotateY(19.5deg);
        -ms-transform:     rotateX(60deg) rotateY(19.5deg);
        transform:         rotateX(60deg) rotateY(19.5deg);
    }
    
    #pyramid > div:nth-child(4) {
        border-color: transparent transparent transparent rgba(50, 50, 50, 0.8);
        -webkit-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
        -moz-transform:    rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
        -ms-transform:     rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
        transform:         rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
    }
    </style>
    </head>
    <body>
     <div class="experiment-body clearfix">
        
          <div class="test test-3dtransforms">
        
    
    <!--
    **************************
    
    Start of experiment
    
    **************************
    -->
    
      
    <article id="viewport">
        <section id="pyramid">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </section>
    </article>
    
    
    <!--
    **************************
    
    End of experiment
    
    **************************
    -->
    
        
          </div>
          </div>
          
    </body>
    
    </html>
    

      

  • 相关阅读:
    JSON 数据格式
    Get,Post请求中文乱码问题有效解决方法
    linux下tomcat的配置及项目的部署流程
    tomcat部署javaweb项目的三种方式
    tomcat-users.xml 配置
    在linux下用tomcat部署java web项目的过程与注意事项
    Linux服务器上的tomcat中部署web项目
    用yum快速搭建LAMP平台
    开源邮件系统Zimbra Collaboration – Open Source Edition
    PVID和VID彻底研究(上) ——PVID的作用及和VID的区别
  • 原文地址:https://www.cnblogs.com/geovindu/p/9087021.html
Copyright © 2011-2022 走看看