width/height after transform

前端未结

关注

 5  1390

予麋鹿

How do I retrieve the width and height properties after I\'ve applied transform: rotate(45deg);?

Like, 11x11 square after rotation becomes 17x17 (Chrome

相关标签:

5条回答

迷失自我

2020-11-27 16:10

Instead of calculating it yourself, you can get this via the HTMLDOMElement's getBoundingClientRect().

This will return an object with the correct height and width, taking into account the transformation matrix.

jsFiddle.

0 讨论(0)
发布评论:

提交评论
- 加载中...
隐瞒了意图╮

2020-11-27 16:10
I made a function for this, domvertices.js

It computes the 4 vertices 3d coordinates of any, deep, transformed, positioned DOM element -- really just any element: see the DEMO.
```
a                b
 +--------------+
 |              |
 |      el      |
 |              |
 +--------------+
d                c

var v = domvertices(el);
console.log(v);
{
  a: {x: , y: , z: },
  b: {x: , y: , z: },
  c: {x: , y: , z: },
  d: {x: , y: , z: }
}
```
With those vertices, you can compute anything among: width, height... Eg, in your case:
```
// norm(a,b)
var width = Math.sqrt(Math.pow(v.b.x - v.a.x, 2) + Math.pow(v.b.y - v.a.y, 2));
```
See the README for more infos.

--

It is published as a npm module (with no dep), so just install it with:
```
npm install domvertices
```
Cheers.
0 讨论(0)
发布评论:

提交评论
- 加载中...

轮回少年

2020-11-27 16:16

In case you're looking for a function to programmatically calculate these values...

// return an object with full width/height (including borders), top/bottom coordinates
var getPositionData = function(el){
    return $.extend({ width : el.outerWidth(false), height : el.outerHeight(false) }, el.offset());
};

// get rotated dimensions   
var transformedDimensions = function(el, angle){
    var dimensions = getPositionData(el);
    return { width : dimensions.width + Math.ceil(dimensions.width * Math.cos(angle)), height : dimensions.height + Math.ceil(dimensions.height * Math.cos(angle)) };
}

Here's a little something I put up. Probably not the best thing ever, but does the job for me.

0 讨论(0)

离开以前

2020-11-27 16:23
I'm writing this answer since you have tagged JQuery.

Jquery takes in to consideration the transform factors when calculating dimensions.

So, if you use
```
$('mySelector').width()
```
it will give you the actual width. Same goes with height(), left() and top()
0 讨论(0)
发布评论:

提交评论
- 加载中...

夕颜

2020-11-27 16:28

Even if you rotate something the dimensions of it do not change, so you need a wrapper. Try wrapping your div with another div element and count the wrappers dimensions:

  <style type="text/css">
  #wrap {
    border:1px solid green;
    float:left;
    }

  #box {
    -moz-transform:rotate(120deg);
    border:1px solid red;
    width:11px;
    height:11px;
  }
  </style>

  <script type="text/javascript">
  $(document).ready(function() {
    alert($('#box').width());
    alert($('#wrap').width());
  });
  </script>
</head>

<body>
 <div id="wrap">
  <div id="box"></div>
  </div>
</body>

Redited: the wrapper solution is not working properly, as the wrapper is not automatically adjusted to the contents of the inner div. Follow the mathematical solution:

var rotationAngle;

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

0 讨论(0)