web前端：原生多棱柱/无限棱柱组件，js生成元素，随机生成旋转角度transform

1.less

* {margin: 0;padding: 0;//注意防止页面下来body {height: 100%;overflow: hidden;#wrap {position: absolute;width: 600px;height: 600px;background: url(../img/my-logo-2.png) repeat;background-size: 50px;border: 1px solid;border-radius: 50%;box-shadow: 2px 2px 5px #00CED1;top: 50%;left: 50%;margin-top: -300px;margin-left: -300px;perspective: 100px;//随机旋转角度
//          &:hover #n-prism {//              transform: rotateY(270deg);
//          }#n-prism {position: absolute;width: 150px;height: 150px;top: 50%;left: 50%;margin-top: -75px;margin-left: -75px;//开启3Dtransform-style: preserve-3d;//避免基点也加入过渡transition: 1s transform;//更新基点TODO:js生成-》transform-origin: center center tan内角*150px(邻边)div {position: absolute;width: 150px;height: 150px;border: 2px solid white;background: tomato;font: 30px/150px "微软雅黑";color: white;font-weight: bold;text-align: center;top: 50%;left: 50%;margin-top: -75px;margin-left: -75px;//背面隐藏backface-visibility: hidden;//自动生成：&:nth-child(1) {transform: rotateY(240deg);}}}}}
}

2.css

* {margin: 0;padding: 0;
}
* body {height: 100%;overflow: hidden;
}
* body #wrap {position: absolute;width: 600px;height: 600px;background: url(../img/my-logo-2.png) repeat;background-size: 50px;border: 1px solid;border-radius: 50%;box-shadow: 2px 2px 5px #00CED1;top: 50%;left: 50%;margin-top: -300px;margin-left: -300px;perspective: 100px;
}
* body #wrap #n-prism {position: absolute;width: 150px;height: 150px;top: 50%;left: 50%;margin-top: -75px;margin-left: -75px;transform-style: preserve-3d;transition: 1s transform;
}
* body #wrap #n-prism div {position: absolute;width: 150px;height: 150px;border: 2px solid white;background: tomato;font: 30px/150px "微软雅黑";color: white;font-weight: bold;text-align: center;top: 50%;left: 50%;margin-top: -75px;margin-left: -75px;backface-visibility: hidden;
}

3.js

/*** 多棱柱脚本*/
window.onload = function() {createPrism(101);//传入的棱数：nfunction createPrism(n) {//动态调整旋转//&:hover #n-prism {//        transform: rotateY(270deg);//    }var wrapStyle=document.createElement("style");var wrapStyleCss="#wrap:hover #n-prism{ transform:rotateY("+(Math.random()*100)+"deg);}"wrapStyle.innerHTML=wrapStyleCss;document.head.appendChild(wrapStyle);//N边形的外角（单个）：360°/nvar outerDeg = 360 / n;//N边形的内角（单个）：180°-360°/nvar innerDeg = 180 - 360 / n;//获取节点var prismNode = document.querySelector("#wrap > #n-prism");//空div标签var prismDiv = "";//生成style样式var prismStyle = document.createElement("style");//空样式集合var prismCss = "";//获取:边长-棱长width//这的n-prism变化存在联动，需要获取到div的width//var prismLength=prismNode.offsetWidth;for(var i = 0; i < n; i++) {prismDiv += "<div>" + (i + 1) + "</div>";prismCss += "#wrap > #n-prism > div:nth-child(" +(i + 1) +"){transform:rotateY(" +(i * outerDeg) + "deg);}";}//写入页面标签prismNode.innerHTML = prismDiv;//这的n-prism变化存在联动，需要获取到div的width//var prismLength=prismNode.offsetWidth;var divWidth = document.querySelector("#wrap > #n-prism > div");var prismLength = divWidth.offsetWidth;//加入基点的更新#n-prism 和 div --》 transform-origin: center center -86.60254037844386px;//正切定理：tan30°=对边/（邻边）150px//对边=150px*tan30°=150*Math.tan(30*Math.PI/180) 这里的30为角度需要转弧度：角度*Math.PI/180prismCss += "#wrap > #n-prism{transform-origin:center center -" + (prismLength / 2 * Math.tan((innerDeg / 2) * Math.PI / 180)) + "px;}";prismCss += "#wrap > #n-prism > div{transform-origin:center center -" + (prismLength / 2 * Math.tan((innerDeg / 2) * Math.PI / 180)) + "px;}"//写入styleprismStyle.innerHTML = prismCss;//写入div样式document.head.appendChild(prismStyle);}
}

4.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>N棱柱module</title></head><body><div id="wrap"><div id="n-prism">cevent</div></div></body><link rel="stylesheet" href="css/less032.css" /><script type="text/javascript" src="js/less032.js"></script>
</html>

5.效果图

web前端：原生多棱柱/无限棱柱组件，js生成元素，随机生成旋转角度transform相关推荐

WEB前端框架jQuery、VueJS、React.JS、Node.JS、Bootstrap解读
Web前端框架可以分为两类: 1)JS的类库框架 JQuery.JS Angular.JS(模型, scope作用域,controller,依赖注入,MVVM):前端MVC Vue.JS(MVVM) ...
Web前端开发入门教程，HTML5+CSS3+JS教程，达到web前端工程师的水平
Web前端开发是一个非常热门的职业,随着互联网的发展,越来越多的企业需要拥有自己的网站和应用程序.本文将介绍Web前端开发的入门教程,包括HTML5.CSS3和JS教程,帮助读者达到Web前端工程师的 ...
web前端入门到实战：html常见的块元素与内联（行内）元素用法说明
html平时常见的块元素有:div, p, h1, h2, h3等,内联元素有:span, a, img等. 块元素的属性:无论内容是什么,都会独占一整行.主要用于页面布局. 内联元素的属性:只占自身 ...
Robotstudio软件：基于Random组件的工件位置随机生成
本文已经首发在个人微信公众号:工业机器人仿真与编程(微信号:IndRobSim),欢迎关注! 对机器人工作站进行仿真的时候,往往会有对随机数的需求,比如使用机器视觉进行机器人位姿引导仿真时,就需要工件 ...
web前端知识点总结html，css，js，vue，react/面试题会经常问到
一阶段 1.网络中使用最多的图片格式有哪些 gif 支持动画,只有全透明和不透明两种模式,只有256种颜色 jpg 采用有损压缩算法,体积较小,不支持透明,不支持动画 png 采用有损压缩算法,体积也 ...
web前端技能方法总结（css、js、jquery、html）
CSS类单词指引 style 修饰 width 宽度 height 高度 title 想说明的 text-align 水平对齐方式 center 居中 left 居左 right 居右 line-he ...
【HTML5】Web前端——第三课：HTML5 表单相关元素和属性
知识点:原有的表单元素及表单控件.HTML5 表单新增功能类型.HTML5 表单控件新增的属性推荐阅读:HTML+CSS第四课:表单标签的使用-制作注册表单 1.原有的表单元素及表单控件表单,是页 ...
【web前端】如何运行第一个vue.js程序，尝试运行官方指导案例
首先我们了解vue.js的官网 https://vuejs.bootcss.com/guide/ 官网上有明确的安装教程: 尝试 Vue.js 最简单的方法是使用 Hello World ...
WEB前端实现图片懒加载 echo.js
echo.js是一个轻小的图片懒加载js插件,在使用过程中很多朋友可能是直接自定义一张占位图片,可能会造成图片的变形等.其实这并不是最佳的解决方案.下面给大家介绍另一种方法,简单的控制下css,实现l ...

web前端：原生多棱柱/无限棱柱组件，js生成元素，随机生成旋转角度transform

1.less

2.css

3.js

4.html

5.效果图

web前端：原生多棱柱/无限棱柱组件，js生成元素，随机生成旋转角度transform相关推荐

最新文章

热门文章