小编Mus*_*ian的帖子

使用CSS3 rotate属性时jQuery .position()奇怪

我正在使用jQuery .position()方法绝对定位旋转元素位置,然后使用jQuery 设置与位置相关的属性(顶部,左侧),返回的数据.css(pos)在哪里.我认为它会将元素留在它的位置,但元素的位置正在发生变化.pos.position()

如何使用设置旋转元素位置,以便它按预期放置?也许有一个系数取决于改变位置的角度?

我正在使用Google Chrome v.9,Windows XP进行测试.

HTML

<div id="container">
  <div id="element"> 
    <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcS0Fawya9MVMez80ZusMVtk_4-ScKCIy6J_fg84oZ37GzKaJXU74Ma0vENc"/>
  </div>
</div> 
Run Code Online (Sandbox Code Playgroud)

CSS

#container {
    position: relative;   
    border: 1px solid #999;
    padding: 5px;
    height: 300px;
    width:300px;
}    
#element {
    position: absolute;
    top:50px;
    left: 60px;
    width: auto;
    border: 1px solid #999;
    padding: 5px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}
Run Code Online (Sandbox Code Playgroud)

JS

$(document).ready(function(){
    var $el = $('#element'),
    // getting position    
        pos = $el.position();
    alert(pos.left + '/' + pos.top);
    // alerts 37/11

    // setting css …
Run Code Online (Sandbox Code Playgroud)

javascript css jquery css-position css3

15
推荐指数
1
解决办法
6626
查看次数

标签 统计

css ×1

css-position ×1

css3 ×1

javascript ×1

jquery ×1