使用css3转换原点居中并缩放

我的页面上有一系列div。每个div都有一个背景图像，并以网格形式排列。我的网页上有不计其数的div。该页面被约束为一个大小使用<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">使用css3转换原点居中并缩放

我想能够点击一个div，让它缩放到一个特定的比例，并居中。

我的标记：

<body id="body"> 
    <div id="container" style="position: relative"> 
     <div id="pack1" class="screenItem cardPack"></div> 
     <div id="pack2" class="screenItem cardPack"></div> 
     <div id="pack3" class="screenItem cardPack"></div> 
     <div id="pack4" class="screenItem cardPack"></div> 
    </div> 
</body>

我的CSS：

#pack1{ 
    margin-left: 20px; 
    margin-top: 20px; 
    height: 193px; 
    width: 127px; 
    background-image: url(../images/image1.png); 
    background-size: 100% 100%; 
    float: left; 
    clear: both; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out;  
    transition: all 1s ease-in-out; 
} 

#pack2{ 
    margin-right: 20px; 
    margin-top: 20px; 
    height: 193px; 
    width: 127px; 
    background-image: url(../images/image2.png); 
    background-size: 100% 100%; 
    float: right; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out;  
    transition: all 1s ease-in-out; 
} 

#pack3{ 
    margin-left: 20px; 
    margin-top: 20px; 
    height: 193px; 
    width: 127px; 
    background-image: url(../images/image3.png); 
    background-size: 100% 100%; 
    float: left; 
    clear: both; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out;  
    transition: all 1s ease-in-out; 
} 

#pack4{ 
    margin-right: 20px; 
    margin-top: 20px; 
    height: 193px; 
    width: 127px; 
    background-image: url(../images/comingSoon.png); 
    background-size: 100% 100%; 
    float: right; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out;  
    transition: all 1s ease-in-out; 
} 
#body, 
.ui-page { 
background-image: url(../images/bg.png); 
background-size: auto 100%; 
background-repeat: repeat-x; 
} 

#container { 
margin: auto; 
width: 310px; 
height: 568px; 
}

我有一个软糖几乎工程：

$(cardPack).click(function() { 
    var left = $(cardPack).position().left; 
    var top = $(cardPack).position().top; 
    $(cardPack).css("-webkit-transform", "scale(2.5,2.5)"); 
    $(cardPack).css("-webkit-transform-origin", (3*(left/4)) + " " + (3*(top/4))); 
});

但我认为这更像是一个巧合和运气。我的大脑并没有运行到可以设置transform-origin的位置，以便图像最终位于屏幕的中心，而不管它的起点如何。

我很乐意考虑transform-origin的替代方案来实现此目的。

编辑： A“不太演技一样，它在本地做”的jsfiddle：http://jsfiddle.net/a7Cks/9/

来源

2012-12-05 Matt Fellows

我想你想使用'.offset'而不是'.position'，因为这是相对于文档的偏移量，而'.position'是相对于父项。 –

不能 - 偏移量使得它更糟糕 - 位置给出了一个非常接近中心的值（一次我至少用不好的数学对它进行修正） –

你可以使http://jsfiddle.net展示你的代码并使用绝对路径图像（或虚拟图像），以便它们显示出来？然后，人们可以更轻松地编辑/播放以尝试和帮助您。 – tw16

只是为了好玩，因为我们是在谈论CSS3，有纯CSS解决方案，使用target: selectiors http://codepen.io/dmi3y/full/keAds，它是位从最初的数据

HTML

<div id="container"> 
    <a href="#pack1" id="pack1" class="screenItem cardPack"></a> 
    <a href="#pack2" id="pack2" class="screenItem cardPack"></a> 
    <a href="#pack3" id="pack3" class="screenItem cardPack"></a> 
    <a href="#pack4" id="pack4" class="screenItem cardPack"></a> 
    </div>

LESS

清理

#pack1{ 
    margin-left: 20px; 
    margin-top: 20px; 
    float: left; 
    clear: both; 

    &:target { 
     top: 105px; left: 75px; 
     margin-left: 0; 
     margin-top: 0; 
    } 
} 

#pack2{ 
    margin-right: 20px; 
    margin-top: 20px; 
    float: right; 

    &:target { 
     top: 105px; left: -75px; 
     margin-right: 0; 
     margin-top: 0; 
    } 
} 

#pack3{ 
    margin-left: 20px; 
    margin-top: 20px; 
    float: left; 
    clear: both; 

    &:target { 
     top: -105px; left: 75px; 
     margin-left: 0; 
     margin-top: 0; 
    } 
} 

#pack4{ 
    margin-right: 20px; 
    margin-top: 20px; 
    float: right; 

    &:target { 
     top: -105px; left: -75px; 
     margin-right: 0; 
     margin-top: 0; 
    } 
} 

#container { 
    position: relative; 
    margin: auto; 
    width: 310px; 
    height: 568px; 
} 

.screenItem { 
    background: green; 
    position: relative; 
    height: 193px; 
    width: 127px; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out;  
    transition: all 1s ease-in-out; 
} 

:target { 
    background: red; 
    z-index: 100; 
    padding: 10px; // + 20 px dimensions 
}

来源

2012-12-13 21:51:20 dmi3y

很酷。从未使用过目标选择器。 – fedmich

在这里，你去我的好先生。

存在一个错误，如果在动画运行时继续点击，它将会再次出现。但我认为这是一个很好的方式来做到这一点。

使用动画：

 $(cardPack).animate({ 
      width: '50%', 
      height: '50%', 

     }, 700, function() { 
      $(cardPack).animate({ 
       left: (contwidth - width * 1.5)/2, 
       top: (contheight - (height+height/2) * 1.5)/2 
      }, 300); 
     });

http://jsfiddle.net/a7Cks/11/

添加height/2，使其中心到对象物体的中部，而不是顶部。

另一点是使用position：absolute来定位元素。位置：CSS中的静态是多余的。

来源

2012-12-07 17:06:02 raam86

谢谢 - 我会保持这一点，作为替代方案，记住，但它并不是一帆风顺的所有在我之后，我得到只是在错误的地方）与CSS比例/原点替代。 –

在你的问题中，你想让它增长然后移动。这里是一个平滑的http://jsfiddle.net/a7Cks/12/ – raam86

@ram - 为了克服重叠的动画，你可以执行['.stop（）'命令]（http://api.jquery.com/stop /）在调用'.animate（）'之前。像这样 - '$（...）。stop（）。animate（...）' – Lix

使用css3转换原点居中并缩放

回答

相关问题