センターとズームに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の代替手段を検討してください。

EDIT：「それはローカルでないと全く同じに動作していない」jsfiddle：ここではhttp://jsfiddle.net/a7Cks/9/

出典

2012-12-05 Matt Fellows

'.offset'ではなく、' .offset'をドキュメントに対して相対的なオフセットとして使いたいと思いますが、 '.position'は親に対して相対的です。 –

Nope - オフセットはそれをさらに悪化させます - 位置は中心にかなり近い値を与えます（少なくとも1回は悪い数学でそれを悪用します） –

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を添加しました。

もう1つのポイントは、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変換元を使用

答えて

関連する問題