我有一个元素列表,在具体操作中,我想应用css-transform translate将其移动到窗口的中心。我知道css-transform用于相对移动元素,但我想知道是否可以将它锚定在某个地方,即在窗口中间(灯箱式)。我正在看一个类似于iPad音乐应用的动画,其中专辑封面翻转和居中。
注意:我想使用css-transforms,因为它避免了周围元素的重排。
南
编辑:我创建了一个JSfiddle以便更好地说明:http://jsfiddle.net/bdtZc/,相关行:
.card:focus {
-webkit-transform: rotateY(180deg);
}
答案 0 :(得分:12)
由于我刚收到另一个关于这个答案的upvote,我以为我会重新审视它。
对于当前的浏览器,您应该从其他答案中获得转换(-50%, - 50%)技术,但这取决于您的内容容器的设置方式可能不会导致窗口的中心;它可能是您的容器的中心,可能比窗口更小或更大。
最新的浏览器支持视口单元(vh,vw),它可以准确地为您提供视口中心所需的内容。由于滚动,从当前位置到视口中心的动画将是一个不同的问题。
http://caniuse.com/#feat=viewport-units https://developer.mozilla.org/en-US/docs/Web/CSS/length(见vh,vw)
您可以通过使用绝对定位来完成此操作而不使用css-transform:
(完整代码:http://jsfiddle.net/wkgWg/)
.posDiv
{
position:absolute;
top:0;
left:0;
margin:0;
border:1px solid red;
-moz-transition:all 2s;
-webkit-transition:all 2s;
-o-transition:all 2s;
transition:all 2s;
}
.triggerElement:hover .posDiv
{
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
-moz-transition:all 2s;
-webkit-transition:all 2s;
-o-transition:all 2s;
transition:all 2s;
}
如果您想继续使用CSS-Transform,您需要计算"中心"或者使用JavaScript转换的结束位置,然后在运行时生成并附加转换语句。您的原点变换向量需要从"中心减去屏幕"矢量。
这是通过jQuery.transit plugin by Rico Sta. Cruz使用css-transform(支持)的javascript版本。
(完全小提琴:http://jsfiddle.net/ZqpGL/263/)
$(function() {
var $cards = $('.card');
var cardInFocus = null;
$cards.each(function(index, elem) {
var $elem = $(elem);
var pos = $elem.position();
$(elem).data('orig-x', pos.left);
$(elem).data('orig-y', pos.top);
});
var reset = function() {
if (cardInFocus) {
$(cardInFocus).transition({
x: 0,
y: 0
});
}
};
$cards.on('focus', function(e) {
reset();
cardInFocus = this;
var $doc = $(document);
var centerX = $doc.width() / 2;
var centerY = $doc.height() / 2;
var $card = $(this);
var origX = $card.data('orig-x');
var origY = $card.data('orig-y');
$(this).transition({
x: centerX - origX,
y: centerY - origY
});
});
$cards.on('blur', function(e) {
reset();
});
});
答案 1 :(得分:10)
CSS-Tricks(http://css-tricks.com/centering-percentage-widthheight-elements/)上的一篇文章指出,人们可以使用绝对定位和翻译的混合,而不需要使用JS。
这有助于限制回流,并在元素或屏幕尺寸更改期间保持元素居中。
.center {
position: absolute;
left: 50%;
top: 50%;
/*
Nope =(
margin-left: -25%;
margin-top: -25%;
*/
/*
Yep!
*/
transform: translate(-50%, -50%);
/*
Not even necessary really.
e.g. Height could be left out!
*/
width: 40%;
height: 50%;
}
答案 2 :(得分:6)
现在可以使用vh
(视图高度)单位在纯CSS中执行此操作。它总是相对于屏幕尺寸,而不是元素本身:
/* position element in middle of screen */
translateY(calc(50vh))
因此,如果您知道元素的高度(例如height:320px
),则可以将其精确地移动到屏幕的中心。
/* moves the element down exactly off the bottom of the screen */
translateY(calc(50vh - 160px))
答案 3 :(得分:0)
我建议为此寻找一个JS解决方案,因为这对于不同大小的图像会有问题,但是因为你要求CSS解决方案...
您可以使用关键帧动画来实现此效果:jsFiddle
.card:focus {
transition:all 2s;
position: absolute;
animation: center 3s forwards;
}
@keyframes center {
0% {
top:0%;
left:0%;
}
100% {
top:45%;
left:45%;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
}
修改强> 这是使用
的 position:relative;
$('.card').focusin(function () {
var tc = $(window).height() / 2 - $('.card').height() / 2;
var lc = $(window).width() / 2 - $('.card').width() / 2 - $(this).offset().left;
$(this).animate({
left: lc,
top: tc
});
});
$('.card').focusout(function () {
$(this).animate({
top: 0,
left: 0
});
});