up vote9down votefavorite
2

I have a series of divs on my page. Each div has a background image and is arranged in a grid formation. There are an abitrary number of divs on my page. The page is constrained to a size using <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

I want to be able to click on a div, have it scale to a specific scale, and center.

My markup:

<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>

my 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;
}

I have a fudge which almost works:

$(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)));
});

But I think that's more of a coincidence and luck. My brain is not working to the point where I can workout where to set the transform-origin so that the image will end up in the center of the screen, regardless of its start point.

I am happy to consider alternatives to transform-origin to make this happen.

EDIT: A "not quite acting the same as it does locally" jsfiddle: http://jsfiddle.net/a7Cks/9/

    
shareimprove this question
 
   
I think you want to use .offset rather than .position as that is the offset relative to the document, whereas .position is relative to the parent. – Explosion Pills Dec 5 '12 at 14:58
   
Nope - offset makes it even worse - the position gives a value quite close to the center (Once I mangle it with bad maths at least) – Matt Fellows Dec 5 '12 at 15:05
   
Can you make a jsfiddle.net demonstrating your code and using absolute paths for the images (or dummy images) so that they show up? Then it will be easier for people to edit/play around to try and help you. – tw16Dec 5 '12 at 16:45
   
As requested @tw16 I've added a fiddle, though it's not acting the same on jsfiddle as it does locally for some reason, only the first pack seems to have a translate-origin that effects it's position. I basically want them to act almost like the first pack, but actually centered... – Matt Fellows Dec 6 '12 at 8:33
正确答案
up vote5down voteaccepted

just for fun, since we are talking about css3, there is pure css solution, using target: selectiors http://codepen.io/dmi3y/full/keAds, it is bit cleaned up from the initial data

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
}
shareimprove this answer
 
   
Cool. never used target selector before. – fedmich Feb 9 '14 at 1:41
up vote2down vote
+25

Here you go my good sir.

There's a bug where if you keep clicking while the animation is running it will go again. but I think this is a nice way to do it.

using animate:

      $(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/

added height/2 to make it center to object middle and not top of object.

Another point is using position:absolute to be able to position the elements . The position:static in the css is redundant.

shareimprove this answer
 
   
Thanks - I will keep this, as an alternative, in mind, but it's not the smooth all in one transition I was after, that I get (just in the wrong place) with the css scale/origin alternative. – Matt Fellows Dec 8 '12 at 8:00
   
Well in your question you wanted it to grow and then move. Here's a smooth one jsfiddle.net/a7Cks/12 – raam86 Dec 8 '12 at 10:04
1 
@ram - To overcome overlapping animations, you can execute a .stop() command just before calling .animate(). Something like this - $(...).stop().animate(...) – Lix Dec 11 '12 at 20:26

来自  https://stackoverflow.com/questions/13725983/use-the-css3-transform-origin-to-center-and-zoom