タグ付けされた質問 「css-transforms」

CSSを使用して、複数のアプリケーションを適用するにはどうすればよいtransformですか？ 例：以下では、回転ではなく、移動のみが適用されます。 li:nth-child(2) { transform: rotate(15deg); transform: translate(-20px,0px); }

605 css  css-transforms 

通常のCSS環境で、固定divが指定された場所に正確に配置される状況があります（top:0px、left:0px）。 translate3d変換を持つ親がいる場合、これは尊重されないようです。私は何かを見ていませんか？スタイルやトランスフォームの元のオプションのような他のwebkit-transformを試しましたが、うまくいきませんでした。 黄色のボックスがコンテナー要素の内部ではなくページの上部隅にあると予想される例をJSFiddleに添付しました。 以下に、フィドルの簡略版を示します。 #outer { position:relative; -webkit-transform:translate3d(0px, 20px , 0px); height: 300px; border: 1px solid #5511FF; padding: 10px; background: rgba(100,180,250, .8); width: 80%; } #middle{ position:relative; border: 1px dotted #445511; height: 300px; padding: 5px; background: rgba(250,10,255, .6); } #inner { position: fixed; top: 0px; box-shadow: 3px 3px 3px #333; …

140 html  css  css-position  css-transforms 

いくつかの列があり、そのうちのいくつかを値を回転させたいとしましょう： http://jsfiddle.net/MTyFP/1/ <div class="container"> <div class="statusColumn"><span>Normal</span></div> <div class="statusColumn"><a>Normal</a></div> <div class="statusColumn"><b>Rotated</b></div> <div class="statusColumn"><abbr>Normal</abbr></div> </div> このCSSでは： .statusColumn b { writing-mode: tb-rl; white-space: nowrap; display: inline-block; overflow: visible; transform: rotate(-90deg); transform-origin: 50% 50%; } 最終的には次のようになります。 テキストが他の要素と重ならないように、回転した要素が親の高さに影響を与える原因となるCSSを記述することは可能ですか？このようなもの：

119 css  css-transforms 

テキスト行の回転と配置に問題があります。今では、機能するのは位置だけです。回転も機能しますが、位置決めを無効にした場合に限ります。 CSS： #rotatedtext { transform-origin: left; transform: rotate(90deg); transform: translate(50%, 50%); } htmlは単なるプレーンテキストです。

86 css  webkit  transform  css-transforms 

CSSトランジションを使用して、CSS変換された状態間を遷移します（基本的には要素のスケールを遷移します）。要素が遷移しているとき、ページ上の残りのテキスト（Webkit内）は、遷移が完了するまでレンダリングをわずかに変更する傾向があることに気付きました。 フィドル： http //jsfiddle.net/russelluresti/UeNFK/ 私はまた、これが私のヘッダーでは発生しないことに気づきました。 -webkit-font-smoothing: antialiasedプロパティと値のペアました。したがって、テキストをデフォルトの外観（フォントスムージングの「自動」値）に維持し、遷移中にレンダリングを変更しない方法はありますか？ 「auto」値を使用するようにテキストを明示的に設定しようとしましたが、何もしません。font-smoothingを「none」に設定すると、トランジション中にレンダリングが点滅するのを防ぐことにも注意してください。 どんな助けでも大歓迎です。 編集1 私はOSXを使用していることに注意してください。ParallelsのChromeでのテストを見ると、2つの異なる段落の動作が異なることがわかりませんでした。したがって、これはMacに固有の問題である可能性があります。

81 css  webkit  css-transitions  css-transforms 

CSSでジェットコースタースタイルのアニメーションを作成しようとしています。 「コースター」をループ段階でカーブさせる方法を知りたい。 私はすべてのCSSソリューションを探していますが、JavaScriptが少し必要な場合はそれで問題ありません。 これまでの私のコード： #container { width: 200px; height: 300px; margin-top: 50px; position: relative; animation: 10s infinite loop; animation-timing-function: linear; } #coaster { width: 100px; height: 10px; background: lightblue; position: absolute; bottom: 0; left: 1px; right: 1px; margin: 0 auto; } @keyframes loop { from { margin-left: -200px; } 30% …

15 html  css  css-animations  css-transforms