在容器中停留的CSS旋转元素
在容器中停留的CSS旋转元素
提问于 2013-11-05 16:41:36
如果你看一下：http://jsfiddle.net/KA4dz/
在本演示中，您可以清楚地看到内部元素由于其旋转而到达外部元素之外。其要求是缩小内部元素(同时保持高宽比和中心位置)，使其适合其容器内。
用例是用户可以手动旋转这样一个内部元素，同时确保它保持在外部元素中。(因此，简单地缩小到适合眼睛的范围并不是一个解决方案)。
在这种情况下，我的数学技能明显缺乏。在这个阶段，张贴我尝试过的内容不会有多大好处。有人能给我指明正确的方向吗？
谢谢!
另一项要求是，内部元素只在需要时缩小，而在不需要时绝不缩小(在需要的情况下，意味着离开外部元素的边界)。
若要保存单击：
.outer{
border: 1px solid black;
width: 100px;
height: 50px;
margin: 100px;
}
.inner{
background: blue;
width: 100px;
height: 50px;
transform: rotate(-40deg);
-webkit-transform: rotate(-40deg);
}
<div class="outer">
<div class="inner">
</div>
</div> 回答 2
Stack Overflow用户
回答已采纳
发布于 2013-11-05 17:56:39
这很有趣。以下是我的解决方案：http://jsfiddle.net/fletiv/jrHTe/
javascript如下所示：
(function () {
var setRotator = (function () {
var setRotation,
setScale,
offsetAngle,
originalHeight,
originalFactor;
setRotation = function (degrees, scale, element) {
element.style.webkitTransform = 'rotate(' + degrees + 'deg) scale(' + scale + ')';
element.style.transform = 'rotate(' + degrees + 'deg) scale(' + scale + ')';
};
getScale = function (degrees) {
var radians = degrees * Math.PI / 180,
sum;
if (degrees < 90) {
sum = radians - offsetAngle;
} else if (degrees < 180) {
sum = radians + offsetAngle;
} else if (degrees < 270) {
sum = radians - offsetAngle;
} else {
sum = radians + offsetAngle;
}
return (originalHeight / Math.cos(sum)) / originalFactor;
};
return function (inner) {
offsetAngle = Math.atan(inner.offsetWidth / inner.offsetHeight);
originalHeight = inner.offsetHeight;
originalFactor = Math.sqrt(Math.pow(inner.offsetHeight, 2) + Math.pow(inner.offsetWidth, 2));
return {
rotate: function (degrees) {
setRotation (degrees, getScale(degrees), inner);
}
}
};
}());
var outer = document.getElementById('outer'),
inner = document.getElementById('inner'),
rotator = setRotator(inner),
degrees = 0;
window.setInterval(function () {
degrees += 1;
if (degrees >= 360) {
degrees = 0;
}
rotator.rotate(degrees);
}, 50);
}());编辑:这是一个图像，试图解释我的代码的逻辑。:)
Stack Overflow用户
发布于 2017-04-20 21:11:27
马蒂答案的简化版本
var scaler = function (id, degrees) {
var inner = document.getElementById(id);
offsetAngle = Math.atan(inner.offsetWidth / inner.offsetHeight);
originalHeight = inner.offsetHeight;
originalFactor = Math.sqrt(Math.pow(inner.offsetHeight, 2) + Math.pow(inner.offsetWidth, 2));
var radians = degrees * Math.PI / 180,
sum, result;
if (degrees < 90) {
sum = radians - offsetAngle;
} else if (degrees < 180) {
sum = radians + offsetAngle;
} else if (degrees < 270) {
sum = radians - offsetAngle;
} else {
sum = radians + offsetAngle;
}
var result = (originalHeight / Math.cos(sum)) / originalFactor;
inner.style.webkitTransform = 'scale(' + result+ ')';
inner.style.transform = 'scale(' + result+ ')';
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19794171
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号