一个简单的多棱柱旋转的3D动画

最新推荐文章于 2022-04-25 10:15:09 发布
最新推荐文章于 2022-04-25 10:15:09 发布
阅读量1.2k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31207499/article/details/81089347
版权

利用CSS3的新增属性，实现简单的3D多棱柱旋转效果，并且将多棱柱的生成写成函数，这样就可以随意生成多棱柱了。 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*n边形的外角和为360  360/n
            n变形的内角 180 - 360/n*/
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
                overflow: hidden;
            }
            
            #wrap{
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                width: 300px;
                height: 300px;
                /*border: 1px solid;*/
                
                perspective: 1000px;
            }
            
            #wrap > .box{
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                width: 300px;
                height: 300px;
                transition:10s transform;
                transform-style: preserve-3d;
                /*transform-origin: center center -28.867513459481287px;*/ 
            }
            #wrap > .box > div{
                position: absolute;
                width: 300px;
                height: 300px;
                background: pink;
                text-align: center;
                font: 50px/300px "微软雅黑";
                /*transform-origin: center center -28.867513459481287px;*/
                backface-visibility: hidden;
            }
            /*#wrap > .box > div:nth-child(3){
                transform: rotateY(240deg);
            }
            #wrap > .box > div:nth-child(2){
                transform: rotateY(120deg);
            }
            #wrap > .box > div:nth-child(1){
            }*/
            
            #wrap:hover > .box{
                transform: rotateY(360DEG);
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div class="box">
            </div>
        </div>
    </body>
    <script type="text/javascript">
        
        //n：棱数
        window.οnlοad=function(){
            createLZ(10);
        }
        
        function createLZ(n){
            var boxNode = document.querySelector("#wrap > .box");
            var stlyleNode = document.createElement("style");
            //外角
            var degOut = 360/n;
            //内角
            var degIn = 180 - 360/n;
            
            var text = "";
            var cssText = "";
            for(var i=0;i<n;i++){
                text+="<div>"+(i+1)+"</div>";
                cssText+="#wrap > .box > div:nth-child("+(i+1)+"){transform: rotateY("+(i*degOut)+"deg);}";
            }
            
            boxNode.innerHTML=text;
            var mianNode = document.querySelector("#wrap > .box > div");
            //棱长
            var length = mianNode.offsetWidth;
            
            cssText+="#wrap > .box{transform-origin: center center -"+(length/2 * Math.tan((degIn/2)*Math.PI/180))+"px;}";
            cssText+="#wrap > .box > div{transform-origin: center center -"+(length/2 * Math.tan((degIn/2)*Math.PI/180))+"px;}";
            
            
            stlyleNode.innerHTML=cssText;
            document.head.appendChild(stlyleNode);
        }
        
        
        
    </script>
</html>

Cassiel.Lee
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Qt OpenGL教程】18：二次几何体
cly116的博客
08-06 3808
这次教程中，我将介绍二次几何体。利用二次几何体，我们可以很容易创建球、圆盘、圆柱和圆锥。
3D可360旋转正六棱柱照片墙
09-29
自己写的可旋转3d图片墙。立方体选用正六棱柱的六个侧面。可360旋转，旋转速度，角度自己在xaml里自己设。照片反射效果用的画刷。
旋转合并照片墙
12-06
24张图片组成的布局，以及像拼图一样的视觉效果。 给人的第一印象非常深刻。
OpenGL绘制的三棱柱（visual c++6.0）
04-15
用OpenGL绘制的三棱柱，平台是vc++。
利用Python绘制三维的规则体（3维柱体、立方体和旋转棱柱）
m0_58024423的博客
04-25 3231
给大家分享几种用python绘制三维的几何体的方法
（七）多棱柱
qq_37833413的博客
02-02 621
文章目录1.概述2.代码2.1 基类2.2 多棱柱 1.概述 本文跟多棱锥的生成一样，只是生成的网格，并未生成法线，发现生成可以参照cube法线生成方法。 2.代码 2.1 基类 using System.Collections; using System.Collections.Generic; using UnityEngine; [RequireComponent(typeof(MeshF...
html制作菱锥旋转,几何画板制作“虚实变化”的旋转正棱锥和正棱柱
weixin_29789925的博客
07-03 347
几何画板制作“虚实变化”的旋转正棱锥和正棱柱立体几何问题的解决，若能借助一个能清楚显示各点、线、面的位置关系的立体图形，将更容易发现解决问题的思路，这需要从一个合适的观察角度来绘制图形，也就需要在绘制时能先从不同角度想象图形，做到“胸有成图”。几何画板提供了这样一个功能：它可以让一个绘制好的图形保持其应有的点、线、面关系进行旋转，从而显现出从不同角度观察图形的效果，进一步帮助我们培养想象图形的能力...
GeoGebra笔记5 踪迹动画（简单的旋转体的生成过程）
ResumeProject的博客
12-03 2612
描角：“ang=90”+“Alt+O” 多边形 选择指令栏 输入指令 启动动画
生成3D多棱柱的方法（3D立体图片）
alca20120的博客
06-18 589
先上一个效果图 主要运用的技术点就是 确认基点，确认每个盒子旋转的度数 3D变换transform: rotateY(-360deg); 景深perspective 3D舞台transform-style: preserve-3d; 代码如下： <!DOCTYPE html> <html lang="en"> <head&...
用Geogebra制作一些动画效果,也是对数学基础的一次检验
热门推荐
stereohomology
11-30 1万+
(1)怎么画椭圆? 从网络看到的图片: 用Geogebra模拟其效果: (2) 矩阵转置的演示: 网络图片: 用Geogebra实现其效果: (3) 曲线从直角坐标到极坐标的转换 网络图片: 用Geogebra模拟其效果:
动态n棱柱直观图、视图及截交线
09-09
用GeoGebra制作，以动态网页格式呈现，演示n棱柱虚实线直观图、视图及截平面和截交线的动态数学课件。
不断旋转、缩放和移动的正三棱锥
09-13
演示一个不断旋转、缩放和移动的正三棱锥。要求正三棱锥 4 个面的颜 色各不相同。
四棱锥立方体旋转
12-13
OpenGL实现四棱锥立方体的建模，并将四棱锥立方体进行旋转，实现物体旋转的漂亮效果，这对于学习OpenGL的学习者非常有用，对于游戏开发者也有很高的参考价值！！
3D旋转图片轮播特效
07-14
3D旋转图片轮播特效
CSS3和JS炫酷3D拖拽卡片动画特效
07-09
CSS3和JS炫酷3D拖拽卡片动画特效
立体圆柱旋转flash动画
07-28
立体圆柱旋转flash动画是一款3D立体圆柱旋转动画素材下载。
JS 3D相册旋转木马网页特效、3D动画、3D相册旋转木马
02-27
JS 3D相册旋转木马网页特效、3D动画、3D相册旋转木马 脚本简介： JS 3D相册旋转木马网页特效是一款炫酷的3D相册旋转木马网页特效，除了图片相册、增加了视频播放和背景音乐播放，相对比普通3D相册旋转木马，功能上了...
网页动画素材 3d炫酷旋转粒子漩涡（抖音资料）
07-11
网页动画素材 3d炫酷旋转粒子漩涡（抖音资料）网页动画素材 3d炫酷旋转粒子漩涡（抖音资料）网页动画素材 3d炫酷旋转粒子漩涡（抖音资料）网页动画素材 3d炫酷旋转粒子漩涡（抖音资料）网页动画素材 3d炫酷旋转粒子...
Android酷炫动画效果之3D星体旋转效果
08-27
本文要实现的3D星体旋转效果是从CoverFlow演绎而来，不过CoverFlow只是对图像进行转动，我这里要实现的效果是要对所有的View进行类似旋转木马的转动
用canvas做一个3D动画
最新发布
04-03
但是，以下是一些可以帮助您学习如何使用Canvas绘制3D动画的资源和步骤： 资源： - MDN Canvas教程: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial - Three.js: https://threejs.org/ - ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值