2016-08-24 2 views
0

HTMLテンプレートを選択できる「ポップアップ」パネルを持つウェブサイトがあります。この段階では、ユーザーエクスペリエンスを向上させるために小さく表示されています。CSSトランスフォームを作成する方法:拡大縮小のように機能します

これは私のセレクタです。非推奨の使用

.panel-overlay .panel-inner .section-preview 
    { 
     display: block; 
     width: 100%; 
     margin-bottom: 50px; 
     border: 1px solid black; 
     cursor: pointer; 
     zoom: 0.2; 
    } 

"ズーム:0.2;"それは正確に正しい

enter image description here

ので、iPadで、それはすべてのテンプレートを拡張できない私はこれを使用することはできませんただし、属性はIOSでサポートされていないに見える属性なので、私が使用するようにアドバイスしました「トランスフォーム:。(0.9)のスケールを、それがすべてのデバイスでひどい見えます

私はあなたが私ができる方法を知っているか、ズームプロパティがやったより多くのように、これが見えるようにする方法を見つけるように見えることはできません

This is what the transform: scale option looks like

答えて

0

変換を親要素だけに適用していますか?

VS

https://jsfiddle.net/Hastig/bz6eLwr3/1/

...両親と子供たちに変換

ちょうど親フィドルのHTMLコードを必要と

https://jsfiddle.net/Hastig/bz6eLwr3/3/

を上の変換

.zoom { 
    transform: scale(0.5); 
} 
+0

私は両方にそれを適用しようとしましたが、実際にdiv内にコンテンツがあるまでは素晴らしいと思われます。トランスフォームを適用するときは、何かにスケールを適用すると、それ自体の心を得て、なぜそれを示唆するスタイルを持たずに垂直方向に集中します。また、スケールされたときのコンテンツの大きさを判断できないようです。私はjsFiddleで私の例を再現しようとしましたが、複雑で遠すぎるマークアップ、イメージ、そしてスタイルを遠く離れて機能させるようにしました。 –

+0

私は想像することができますが、各ブラウザで異なる修正を必要とする変換では不完全な動作がたくさんあります。私の唯一のアドバイスは、それがまだではない場合には反応的であるように書き直し、 'transform:scale'を避けることです。 –

関連する問題