sin cos tan在前端的应用

来源：互联网发布：centos mount iso文件编辑：程序博客网时间：2024/05/16 01:22

/*
正N边形外角和 = 360
正N边形外角 = 360/n
正N边形内角 = 180 - 360/n

正弦 Math.sin() 直角三角形中对边和斜边的比值
余弦 Math.cos() 直角三角形中临边和斜边的比值
正切 Math.tan() 直角三角形中对边和临边的比值

已知角度，和临边求对边
Math.tan(弧度)*临边 = 对边

弧度 = 角度*Math.PI/180;

对边 = Math.tan(角度*Math.PI/180)*临边

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">#box {position: relative;width: 10px;height: 10px;margin: 200px auto;background: blue;}#box div {position: absolute;left: 50%;top: 50%;margin: -1px 0 0 -50px;width: 100px;height: 2px;background: red;}#box div:nth-of-type(1) {transform: rotate(0deg) translateY(87px);}#box div:nth-of-type(2) {transform: rotate(60deg) translateY(87px);}#box div:nth-of-type(3) {transform: rotate(120deg) translateY(87px);}#box div:nth-of-type(4) {transform: rotate(180deg) translateY(87px);}#box div:nth-of-type(5) {transform: rotate(240deg) translateY(87px);}#box div:nth-of-type(6) {transform: rotate(300deg) translateY(87px);}/*正N边形外角和 = 360正N边形外角 = 360/n正N边形内角 = 180 - 360/n正弦 Math.sin() 直角三角形中 对边和斜边的比值余弦 Math.cos() 直角三角形中 临边和斜边的比值 正切 Math.tan() 直角三角形中 对边和临边的比值 已知角度，和临边 求对边Math.tan(弧度)*临边 = 对边弧度 = 角度*Math.PI/180;对边 = Math.tan(角度*Math.PI/180)*临边 */</style><script type="text/javascript">//console.log(Math.tan(60*Math.PI/180)*50); 87</script></head><body><div id="box"><div></div><div></div><div></div><div></div><div></div><div></div></div></body></html>

只要设置位移和旋转角度就可以快速的生成一个多边形

多边形立体盒子:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">@keyframes rotateY {0%{transform: rotateY(0deg);}100%{transform: rotateY(360deg);}}@-webkit-keyframes rotateY {0%{-webkit-transform: rotateY(0deg);}100%{-webkit-transform: rotateY(360deg);}}#view {position: absolute;left: 0;top: 0;width: 100%;height: 100%;-webkit-perspective: 400px;perspective: 400px;}#box {position: absolute;left: 50%;top: 50%;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-animation: 3s rotateY linear infinite;animation: 3s rotateY linear infinite;}#box div {position: absolute;left: 50%;top: 50%;margin: -100px 0 0 -50px;width: 100px;height: 200px;font-size: 50px;text-align: center;line-height: 200px;color: #fff;}#box div:nth-of-type(2n) {background: red;}#box div:nth-of-type(2n-1) {background: green;}</style><script type="text/javascript" src="js/m.Tween.js"></script><script type="text/javascript">window.onload = function(){var div = document.querySelectorAll('#box div');var deg = 360 / div.length; //求的是外角var width = div[0].offsetWidth;var R = Math.tan((180-deg)/2*Math.PI/180)*(width/2);// (180-deg)/2 换算成夹角for(var i = 0; i < div.length; i++){var divDeg = i * deg;css(div[i],"rotateY",divDeg);css(div[i],"translateZ",R);}};</script></head><body><div id="view"><div id="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div></div></body></html>

查看效果:http://runjs.cn/code/fwafviqx

0 0