How to move fluid divs the correct distance on/off screen using CSS3 transforms?

问题

I have a fluid container which contains a number of absolutely positioned fluid divs. I want to use CSS3 transforms to move these on and off the page. The problem i am having is that when using transforms you either use exact pixel amounts or percentages of the element itself.

So you can see an example of the sort of thing i'm referring to (this is just a test example) at http://jsfiddle.net/K3uPY/

This is using a transform of 1000% to move them offscreen which is obviously not a good thing to do as if the display is massive it won't work and it means each div ends up a different distance from off the screen edge so the animations can end up taking quite a different amount of time to complete depending on their original size.

What i want to do it move them all just offscreen based on the viewport width/height (and the related direction).

This can easily be done by animating the top/left positions but this is obviously not optimal on all devices (see http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/)

Is there anyway to do this using CSS3 transforms or even keyframes or am i stuck having to animate the left/top positions?

The CSS from the JSfiddle is:

html, body {height:100%; width: 100%; padding:0; margin:0;}
#wrapper {width: 100%; height: 100%; overflow: hidden;}
#container {width:50%; height: 50%; margin: auto; position: relative;}
#container div {
background-color: red;
position: absolute;
height: 25%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
border: 2px solid #000000;
-webkit-transition-duration: 600ms;
-moz-transition-duration: 600ms;
-o-transition-duration: 600ms;
    transition-duration: 600ms;
    cursor: pointer;
}

.zoomleft {
-webkit-transform:translate(-1000%);
-moz-transform:translate(-1000%);
-ms-transform:translate(-1000%);
-o-transform:translate(-1000%);
    transform:translate(-1000%);
}
.zoomright {
-webkit-transform:translate(1000%);
-moz-transform:translate(1000%);
-ms-transform:translate(1000%);
 -o-transform:translate(1000%);
    transform:translate(1000%);
}
.zoomtop {
-webkit-transform:translate(0, -1000%);
-moz-transform:translate(0, -1000%);
-ms-transform:translate(0, -1000%);
 -o-transform:translate(0, -1000%);
    transform:translate(0, -1000%);
}
.zoombottom {
-webkit-transform:translate(0, 1000%);
-moz-transform:translate(0, 1000%);
-ms-transform:translate(0, 1000%);
 -o-transform:translate(0, 1000%);
    transform:translate(0, 1000%);
}

div.d1 {
width: 50%;
top: 0;
left: 0;
}
div.d2 {
width: 50%;
top: 0;
left: 50%;
}
div.d3 {
width: 25%;
top: 25%;
left: 0;
}
div.d4 {
width: 25%;
top: 25%;
left: 25%;
}
div.d5 {
width: 25%;
top: 25%;
left: 50%;
}
div.d6 {
width: 25%;
top: 25%;
left: 75%;
}
div.d7 {
width: 50%;
top: 50%;
left: 0;
}
div.d8 {
width: 50%;
top: 50%;
left: 50%;
}
div.d9 {
width: 50%;
top: 75%;
left: 0;
}
div.d10 {
width: 50%;
top: 75%;
left: 50%;
}

Thanks everyone,

Dave

回答1:

Fortunately, since everything is fluid according to the viewport, you can still use percentages in the transform. See my Fiddle - http://jsfiddle.net/K3uPY/23/

One thing I did have to change was make sure #container was in the absolute center. I have also drastically simplified the JS and moved all of the positioning into the CSS.

HTML

<div id="wrapper">
    <button id="movebtn">Move</button>
    <div id="container">
        <div class="box d1 active">1</div>
        <div class="box d2 active">2</div>
        <div class="box d3 active">3</div>
        <div class="box d4 active">4</div>
        <div class="box d5 active">5</div>
        <div class="box d6 active">6</div>
        <div class="box d7 active">7</div>
        <div class="box d8 active">8</div>
        <div class="box d9 active">9</div>
        <div class="box d10 active">10</div>
    </div>
</div>

JAVASCRIPT

$( "#movebtn" ).on('click', function() {
    $('.box').toggleClass('active');
});

CSS

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

#wrapper {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

#container {
    width: 50%;
    height: 50%;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.box {
  background-color: red;
  border: 2px solid #000000;
  box-sizing: border-box;
  cursor: pointer;
  height: 25%;
  position: absolute;
  transition-duration: 600ms;
}
.box.active {
  transform: none;
}


.d1 {
  width: 50%;
  top: 0;
  left: 0;
  transform: translateY(-300%);
}
.d2 {
  width: 50%;
  top: 0;
  left: 50%;
  transform: translateY(-300%);
}



.d3 {
    width: 25%;
    top: 25%;
    left: 0;
    transform: translateX(-300%);
}
.d4 {
    width: 25%;
    top: 25%;
    left: 25%;
    transform: translateX(-400%);
}
.d5 {
    width: 25%;
    top: 25%;
    left: 50%;
    transform: translateX(400%);
}
.d6 {
    width: 25%;
    top: 25%;
    left: 75%;
    transform: translateX(300%);
}



.d7 {
    width: 50%;
    top: 50%;
    left: 0;
    transform: translateX(-200%);
}
.d8 {
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translateX(200%);
}


.d9 {
    width: 50%;
    top: 75%;
    left: 0;
    transform: translateY(300%);
}
.d10 {
    width: 50%;
    top: 75%;
    left: 50%;
    transform: translateY(300%);
}

来源：https://stackoverflow.com/questions/24434593/how-to-move-fluid-divs-the-correct-distance-on-off-screen-using-css3-transforms