假设我有几列,其中一些我想旋转以下值:

http://jsfiddle.net/MTyFP/1/

<div class="container">
    <div class="statusColumn"><span>Normal</span></div>
    <div class="statusColumn"><a>Normal</a></div>
    <div class="statusColumn"><b>Rotated</b></div>
    <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

有了这个CSS:

.statusColumn b {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

最终看起来像这样:

是否可以编写任何会导致旋转元素影响其父级高度的CSS,这样文本就不会与其他元素重叠？像这样的东西:

我发现了这个:变换后的宽度/高度

还有其他几个,但没有什么不是我想要的.我想要的是将某些东西缩放到它的大小的50%(当然有很好的动画过渡)并让页面布局重新调整到元素的新(可视)大小.默认情况下似乎发生的是元素仍然在布局结构中保留其原始大小,并且仅使用关联的转换绘制.

基本上我希望用户点击一个文本块(或其他内容),然后将该文本缩放到它的大小的50%(或其他),并将其粘贴在下面的面板中以指示它已被选中.移动它后,我不希望元素周围有50%的空白.

我已经尝试重新设置高度/宽度,但这会导致元素自身进行新的布局,然后将比例应用于新布局,这仍然会在完成后留下50%的空白区域.我的mozilla特定(为简单起见)代码如下所示:

<script type="text/javascript">
 function zap(e) {

  var height = e.parentNode.offsetHeight/2 + 'px';
  var width = e.parentNode.offsetWidth/2 + 'px';
  e.parentNode.style.MozTransform='scale(0.0)'; 
  e.parentNode.addEventListener(
    'transitionend', 
    function() { 
      var selectionsArea = document.getElementById("selected");
      selectionsArea.appendChild(e.parentNode);
      e.parentNode.style.MozTransform='scale(0.5,0.5)'; 
      e.parentNode.style.display = 'inline-block';
      e.parentNode.style.height = height;
      e.parentNode.style.width = width;
    },
    true) 
}
</script>

我真的希望我不必为了达到这个目的而弄清楚负利润或相对定位......

编辑:自写这篇文章以来,我发现了一个非常相似的问题,没有评论或答案.它略有不同,因为我不关心它是一个html5特定的解决方案,我怀疑解决方案要么不存在,要么在CSS/javascript中,无论html级别如何.

使用CSS3变换scale()缩放/缩放DOM元素及其占用的空间

编辑2 :(另一次非工作尝试)

我也尝试过这个,但是缩放和平移函数似乎以一种使最终位置无法预测的方式相互作用......并且变换前的缩放似乎与变换然后缩放相同.不幸的是,这不仅仅是通过比例因子调整翻译的问题......

function posX(e) {
    return e.offsetLeft + (e.offsetParent ? posX(e.offsetParent) : 0)
}

function posY(e) {
    return e.offsetTop + (e.offsetParent ? posY(e.offsetParent) : 0)
}

function placeThumbNail(e, …

我一直在尝试在 Javascript 中创建这样的东西：

如您所见，容器可以被拖动、旋转和调整大小。大多数事情都可以正常工作，但是容器在旋转时调整大小会产生奇怪的输出。

我希望这会发生：

相反，我得到了这个：

这是完整的代码：

https://jsfiddle.net/c0krownz/

或者，

var box = document.getElementById("box");
var boxWrapper = document.getElementById("box-wrapper");

var initX, initY, mousePressX, mousePressY, initW, initH, initRotate;

function repositionElement(x, y) {
    boxWrapper.style.left = x;
    boxWrapper.style.top = y;
}

function resize(w, h) {
    box.style.width = w + 'px';
    box.style.height = h + 'px';
    boxWrapper.style.width = w;
    boxWrapper.style.height = h;
}


function getCurrentRotation(el) {
    var st = window.getComputedStyle(el, null);
    var tm = st.getPropertyValue("-webkit-transform") ||
        st.getPropertyValue("-moz-transform") ||
        st.getPropertyValue("-ms-transform") ||
        st.getPropertyValue("-o-transform") ||
        st.getPropertyValue("transform")
    "none";
    if (tm …

我正在反对offsetWidth属性的奇怪(我认为).
这是场景:

我已经得到了一个span标签,在我的js中,在某一点上我对这个元素执行css3转换,如:

        el.set('styles', {
            'transform':'scale('+scale+', '+scale+')',      /* As things would be in a normal world */
            '-ms-transform':'scale('+scale+', '+scale+')',      /* IE 9 */
            '-moz-transform':'scale('+scale+', '+scale+')',         /* Moz */
            '-webkit-transform':'scale('+scale+', '+scale+')',  /* Safari / Chrome */
            '-o-transform':'scale('+scale+')'       /* Oprah Winfrey */ 
        }); 
        w = el.getWidth();
        console.log('after scaling: ' + w);

此时日志返回模糊值,就像它不知道该说什么.
有什么建议吗？

基本上我是在问JavaScript这个问题:从旋转的矩形计算边界框坐标

在这种情况下:

• iX =旋转(蓝色)HTML元素的宽度
• iY =旋转(蓝色)HTML元素的高度
• bx =边界框宽度(红色)
• by =边界框高度(红色)
• x =边界框的X坐标(红色)
• y =边界框的Y坐标(红色)
• iAngle/t = HTML元素的旋转角度(蓝色;未显示但在下面的代码中使用),仅供参考:在此示例中它是37度(不是对于示例而言重要)

如何通过JavaScript计算旋转的HTML元素(给定其宽度,高度和旋转角度)周围的边界框(所有红色数字)的X,Y,高度和宽度？一个棘手的问题是将旋转的HTML元素(蓝色框)的原始X/Y坐标用作某种方式的偏移(这在下面的代码中没有表示).这可能需要查看CSS3的变换原点来确定中心点.

我有一个部分解决方案,但X/Y坐标的计算不正常...

var boundingBox = function (iX, iY, iAngle) {
    var x, y, bx, by, t;

    //# Allow for negetive iAngle's that rotate counter clockwise while always ensuring iAngle's < 360
    t = ((iAngle < 0 ? 360 - iAngle : iAngle) % 360);

    //# Calculate the width (bx) and height (by) of the .boundingBox
    //#     NOTE: See https://stackoverflow.com/questions/3231176/how-to-get-size-of-a-rotated-rectangle
    bx …

在rotate应用过滤器后获取div的位置时遇到问题.我有一个端点的位置,它的高度和它旋转的角度,但在检查了这个滤波器实际上对MDN的影响("[cos(角度)sin(角度)-sin(角度)cos(角度) 0 0]")我仍然不知道如何破解它.

示例:

我感兴趣的div是虚线.它的造型在那一刻是:

left: 80px; top: 12px; height: 69.5122px; width: 2px; -moz-transform: rotate(-1.21366rad);

(top/ left描述它的开始位置).我试图让top/ left其最终的位置.

我从旋转的矩形中读取了" 计算边界"框的坐标,以了解如何从旋转的矩形计算边界框坐标.但在特殊情况下如下图:

如果获得边界框大小,坐标和旋转度,如何获得旋转的矩形大小？

我尝试在javascript中编写代码

//assume w=123,h=98,deg=35 and get calculate box size
var deg = 35;
var bw = 156.9661922099485;
var bh = 150.82680201149986;

//calculate w and h
var xMax = bw / 2;
var yMax = bh / 2;
var radian = (deg / 180) * Math.PI;
var cosine = Math.cos(radian);
var sine = Math.sin(radian);
var cx = (xMax * cosine) + (yMax * sine)   / (cosine * cosine + sine * sine);
var cy …

translateZ使用set perspective(关键字:"parallax")相对于父级宽度/高度的父容器内部计算子元素的宽度/高度的公式是什么？

我想在两个轴上创建一个具有视差效果的站点.除了一件事,我能够弄清楚我的模型需要的一切.当它超过100%时,如何计算儿童的宽度/高度.由于父母的视角和儿童的翻译,儿童的宽度/高度在视觉上不再与父母的宽度/高度对齐.

用于缩放子元素的公式是:1 + (translateZ * -1) / perspective.但我无法找到宽度/高度的公式.顺便说一句:当孩子的宽度/高度<= 100%时,一切正常.
但是当宽度> = 100%时,请查看下图中的结果(容器具有顶部偏移以使事物可见).

为了正确,在我的特定情况下,方法是让所有子元素在视觉上具有相同的宽度/高度.

在SASS(首选):CSS中的PEN或SassMeister
:PEN

来自可能有用的规范的链接:
https://www.w3.org/TR/css-transforms-1/#recomposing-to-a-3d-matrix
https://www.w3.org/TR/css-变换-1 /#数学-描述

"谷歌搜索"很多,但没有找到任何指向我正确方向的东西.提前致谢...

html, body {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

#projection {
  perspective: 1px;
  perspective-origin: 0 0;
  height: 100%;
  overflow: auto;
  width: 100%;
}

.pro {
  transform: scale(1) translate(0px, 0px) translateZ(0px);
  height: 100%;
  position: absolute;
  transform-origin: 0 0;
  transform-style: preserve-3d;
  width: 100%;
}

.pro--1 { …

我想检索我已应用CSS3转换的div的大小.

-webkit-transform: scale3d(0.3, 0.3, 1);

所以,实际上我已经将元素的原始尺寸缩小了30%.但是,当我查询元素的宽度/高度时,它会在应用变换之前报告元素的大小.

我知道这实际上是正确的行为,并且该元素实际上并没有改变大小,但其内容确实如此.但是,我在这里问的原因是,如果我右键单击元素并从弹出菜单中选择"inspect element"(我刚才在Mac上使用Safari),元素会突出显示渲染的大小显示在附加到元素的浏览器工具提示中.

所以,这表明浏览器"知道"渲染的大小,但我还没有找到一种方法来访问这些信息.谁能帮我？

如果我有这些规则:

width:50px;
height:100px;
-moz-transform: rotate(0deg)

然后一个事件将转换更改为:

-moz-transform: rotate(90deg)

从逻辑上讲,不应该自动交换宽度和高度？我需要旋转来切换宽度和高度,以便进行精确的位置检测.

谢谢,

乔

这个问题是问题的后续问题:变换后的宽度/高度.

我发布了一个新问题,因为这个问题只能解决宽度而不是高度.公式:

var x = $('#box').width()*Math.cos(rotationAngle) 
      + $('#box').height()*Math.sin(rotationAngle);

适用于宽度,计算高度的等效公式是什么？

谢谢.