• 三棱柱以及多棱柱的实现


    学习所谓是从浅到深,先掌握基本的实现,再去实现多样化

    首先来一个三棱柱的实现:

    1、先了解三棱柱的z轴的中心怎么求,根据数学公式可是,z轴的一半=deg/2*math.pi/180 * legth/2

    length = 边的一半(每条边都一样长,每个角都一样大)

    内角 = 180-360/n

    外角 = 360/n

    所以中心线就可以求出来啦,下面给出代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <!--n边形的的内角和是180,外角和是360,
                内角 = 180-360/n
            -->
            <style type="text/css">
                *{
                    padding: 0;
                    margin: 0;
                    
                }
                #wrap{
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    width: 400px;
                    height: 400px;
                    margin-left: -200px;
                    margin-top: -200px;
                    border: 1px solid;
                    perspective: 200px;
                    
                }
                #wrap > .box{
                    width: 100px;
                    height: 100px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                    /*background: pink;*/
                    transform-style: preserve-3d;
                    transition: 3s;
                }
                #wrap > .box > div{
                    width: 100px;
                    height: 100px;
                    position: absolute;
                    background: pink;
                    text-align: center;
                    font: 50px/100px "微软雅黑";
                    transform-origin: center center -28.867513459481287px;
                        
                }
                
                #wrap > .box >div:nth-child(3){
                    transform: rotateY(120deg);
                     
                }
                #wrap > .box >div:nth-child(2){
                    transform: rotateY(240deg);
                }
                #wrap:hover .box{
                    transform: rotateY(180deg);
                }
            </style>
        </head>
        <body>
            <div id="wrap">
                
                <div class="box">
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                </div>
                
            </div>
        </body>
    </html>

    效果图如下:

    多棱柱其实道理是一样的,只是需要设计只能一点,不需要人工干涉太多的东西:

    先上效果图吧,嘻嘻

    好啦,不多说了,看了效果图是不是很好玩,那就给上代码吧:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <!--n边形的的内角和是180,外角和是360,
                内角 = 180-360/n
            -->
            <style type="text/css">
                *{
                    padding: 0;
                    margin: 0;
                    
                }
                #wrap{
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    width: 300px;
                    height: 300px;
                    margin-left: -200px;
                    margin-top: -200px;
                    /*border: 1px solid;*/
                    /*大小也跟视觉设置有关系,越大就看着好像越大的感觉*/
                    perspective: 1000px;
                    
                }
                #wrap > .box{
                    width: 300px;
                    height: 300px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                    /*background: pink;*/
                    transform-style: preserve-3d;
                    /*要设置过渡的属性是transform 要不然的话,变换基点也会跟着过渡,那就有点奇怪了*/
                    transition: 10s transform;
                }
                #wrap > .box > div{
                    width: 300px;
                    height: 300px;
                    position: absolute;
                    background: pink;
                    text-align: center;
                    font: 50px/300px "微软雅黑";
                    backface-visibility: hidden;
                    /*transform-origin: center center -28.867513459481287px;*/
                        
                }
                
                /*#wrap > .box >div:nth-child(3){
                    transform: rotateY(120deg);
                     
                }
                #wrap > .box >div:nth-child(2){
                    transform: rotateY(240deg);
                }
                #wrap:hover .box{
                    transform: rotateY(180deg);
                }*/
                #wrap:hover > .box{
                    transform: rotateY(360DEG);
                }
            </style>
        </head>
        <body>
            <div id="wrap">
                
                <div class="box">
                    
                </div>
                
            </div>
        </body>
        <script type="text/javascript" src="../2D变换/js/jquery-1.10.1.js"></script>
        <script type="text/javascript">
            $(function(){
                createLZ(10)
            })
            function createLZ(n){
                    
                    
                    var boxNode = $("#wrap > .box");
                    var styleNode = $("head>style");
                    
                    //内角
                    var degIn = 180-360/n;
                    var degOut = 360/n;
                    
                    var divHtml = '';
                    var styleHtml = '';
                    
                    
                    for (var i = 0; i<n;i++) {
                        divHtml+="<div>"+(i+1)+"</div>";
                        styleHtml+="#wrap > .box >div:nth-child("+(i+1)+"){transform: rotateY("+(i*degOut)+"deg);}"
                    }
                    styleNode.append(styleHtml);
                    boxNode.append(divHtml)
                    var divNode = $("#wrap > .box > div");
                    var length = divNode.width()
                    
                    styleNode.append("#wrap > .box >div {transform-origin: center center -"+((length/2)*Math.tan(((degIn/2)*Math.PI)/180))+"px;}")
                    styleNode.append("#wrap > .box {transform-origin: center center -"+((length/2)*Math.tan(((degIn/2)*Math.PI)/180))+"px;}")
                }
        </script>
    </html>

    注意几个点辣:

    1、/*大小也跟视觉设置有关系,越大就看着好像越大的感觉*/

    2、/*要设置过渡的属性是transform 要不然的话,变换基点也会跟着过渡,那就有点奇怪了*/

  • 相关阅读:
    Fast exit from dram self-refresh
    关于Net开发中一些SQLServer性能优化的建议
    收集一些优秀的DoNet开源项目
    收集一些优秀的DoNet开源项目
    收集一些优秀的DoNet开源项目
    LINQ表达式用法整理
    LINQ表达式用法整理
    LINQ表达式用法整理
    SQL 拼接多个字段的值&一个字段多条记录的拼接
    你应该知道的jQuery技巧【收藏】
  • 原文地址:https://www.cnblogs.com/caicaihong/p/9639874.html
Copyright © 2020-2023  润新知