タグ付けされた質問 「transform」

CSS3トランスフォームを使用して、Webサイトで境界線のある画像やテキストボックスを回転させています。 問題は、アンチエイリアスのない（低解像度）ゲームのように、境界線がChromeでギザギザに見えることです。IE、Opera、FFでは、AAが使用されているため、はるかに良く見えます（これはまだはっきりと見えますが、それほど悪くはありません）。Macを所有していないため、Safariをテストできません。 回転した写真とテキスト自体はきれいに見えますが、ギザギザに見えるのは境界線だけです。 私が使用するCSSは次のとおりです。 .rotate2deg { transform: rotate(2deg); -ms-transform: rotate(2deg); /* IE 9 */ -webkit-transform: rotate(2deg); /* Safari and Chrome */ -o-transform: rotate(2deg); /* Opera */ -moz-transform: rotate(2deg); /* Firefox */ } ChromeにAAを使用するように強制するなど、これを修正する方法はありますか？ 以下の例：

193 google-chrome  css  transform  antialiasing 

私はしばらくこれに苦労しており、どこでも（うまくいく）答えを見つけることができないようです。次のようなSVGファイルがあります。 <svg xmlns:dc="http://purl.org/dc/elements/1.1/" ... width="72.9375" height="58.21875" ...> ... <g ... transform="translate(10.75,-308.96875)" style="..."> <path inkscape:connector-curvature="0" d="m -10.254587,345.43597 c 0,-1.41732 0.17692,-2.85384 0.5312502,-3.5625 0.70866,-1.41733 2.14518,-2.82259 3.5625,-3.53125 1.41733,-0.70866 2.11392,-0.70867 3.53125,0 1.41732,0.70866 ... z" ... /> </g> </svg> transform="..."行を削除したいのですが、（InkScapeで）配置した場所に画像が残っています。変換を手動で削除すると、画像は画面の別の部分に（予想どおり）圧縮されますが、変換を完全に削除すると同時に、画像を希望する場所に正確に留める必要があります。変換をパス座標自体に削除/平坦化する方法はありますか？（私が処理しなければならない唯一の変換は、行列ではなく、変換とスケーリングです。）

155 svg  transform  inkscape 

最近のGoogle Chromeの更新により、を実行した後にテキストが不鮮明になるようtransform: scale()です。具体的には私はこれをやっています： @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } Chromeでhttp://rourkery.comにアクセスすると、メインテキスト領域に問題が表示されます。これは以前は行われていなかったため、他のWebkitブラウザー（Safariなど）に影響を与えていないようです。3D変換で同様の問題が発生している人々に関する他の投稿がいくつかありましたが、このような2D変換については何も見つかりません。 どんなアイデアでも感謝します、ありがとう！

126 google-chrome  css  webkit  transform  css-animations 

私は、PNGおよびCSS3アニメーションを使用して、Appleスタイルのアクティビティインジケーター（サンディングロードアイコン）を複製しようとしています。画像を回転させて継続的に実行していますが、アニメーションが終了してから次の回転を行うまでに遅延があるようです。 @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } #loading img { -webkit-animation-name: rotate; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: infinite; -webkit-transition-timing-function: linear; } 私はアニメーションの期間を変更しようとしましたが、違いはありません。すぐに遅くした場合、5秒と言うのは、最初の回転の後、再び回転する前に一時停止があるということです。それは私が取り除きたいこの一時停止です。 助けてくれてありがとう、ありがとう。

120 animation  webkit  css  transform 

Javaの組み込みXMLトランスフォーマーを使用してDOMドキュメントを取得し、結果のXMLを出力しています。問題は、パラメータ「indent」を明示的に設定したにもかかわらず、テキストをまったくインデントしないことです。 サンプルコード public class TestXML { public static void main(String args[]) throws Exception { ByteArrayOutputStream s; Document d = DocumentBuilderFactory.newInstance().newDocumentBuilder().newDocument(); Transformer t = TransformerFactory.newInstance().newTransformer(); Element a,b; a = d.createElement("a"); b = d.createElement("b"); a.appendChild(b); d.appendChild(a); t.setParameter(OutputKeys.INDENT, "yes"); s = new ByteArrayOutputStream(); t.transform(new DOMSource(d),new StreamResult(s)); System.out.println(new String(s.toByteArray())); } } 結果 <?xml version="1.0" …

112 java  xml  transform  indentation 

複数のユーザー間でテキストをリアルタイムで同期できるライブラリを探しています（Googleドキュメント）。 私は自分のニーズに合っていると思われる運用変革に遭遇しました。そうは言っても、私はOTの要点は理解していますが、数学やOTの実装については理解していません。 したがって、テキスト領域にフックして変換を生成し、それらの変換を別のクライアントに適用できるようにするドラッグアンドドロップJavascriptライブラリがあるかどうか疑問に思いました。 （Etherpadのソースを入手しましたが、それから頭や尾を作成することはできません。EtherpadのOT実装で活用する方法を誰かが指摘できれば、それも素晴らしいことです！）

102 transform  etherpad  operational 

2つの絶対位置に配置されたdiv要素が重複しています。どちらもcssを介してz-index値を設定しています。私はtranslate3dwebkit変換を使用して、これらの要素を画面からアニメーション化し、画面に戻します。変換後、要素は設定z-index値を尊重しなくなります。 誰かがdiv要素のz-index / stack-orderにWebkit変換を実行するとどうなるかを説明できますか？そして、div要素のスタック順を維持するために何ができるかを説明しますか？ ここでは、私がどのように変換を行っているかについてのいくつかの詳細情報を示します。 変換前に、各要素はcssを介して設定されたこれらの2つのWebkitトランジション値を取得します（私は.css()関数呼び出しにjQueryを使用しています： element.css({ '-webkit-transition-duration': duration + 's' }); element.css({ '-webkit-transition-property': '-webkit-transform' }); 次に、要素はtranslate3d -webkit-transformを使用してアニメーション化されます。 element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' }); ところで、3番目のパラメーターtranslate3dをいくつかの異なる値に設定して、3Dスペースでスタック順序を複製しようとしましたが、うまくいきませんでした。 また、iPhone / iPadおよびAndroidブラウザーは、このコードを実行する必要があるターゲットブラウザーです。どちらもWebkitの移行をサポートしています。

98 css  webkit  transform 

既存のASP.NetWebアプリケーションプロジェクトをソリューションに追加しました。このソリューションには、標準のデバッグおよびリリース構成に加えて、SATとUATの2つのカスタム構成もあります。新しいWebアプリケーションの場合、Web.Configを右クリックするとコンテキストメニューが表示されますが、[構成変換の追加]のオプションはグレー表示されます。 私は途方に暮れています。新しいプロジェクトはWebアプリケーションです。構成マネージャーには、このプロジェクトの2つのカスタム構成は表示されませんが、他のプロジェクトには表示されます。プロジェクトのソリューションファイルに正しいエントリがあるようです。 考え？

88 asp.net  web-config  transform 

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

86 css  webkit  transform  css-transforms 

変換プロパティを使用すると、z-indexがキャンセルされ、前面に表示されます。（-webkit-transformをコメントアウトすると、z-indexは以下のコードで正しく機能します） .test { width: 150px; height: 40px; margin: 30px; line-height: 40px; position: relative; background: white; -webkit-transform: rotate(10deg); } .test:after { width: 100px; height: 35px; content: ""; position: absolute; top: 0; right: 2px; -webkit-box-shadow: 0 5px 5px #999; /* Safari and Chrome */ -webkit-transform: rotate(3deg); /* Safari and Chrome */ transform: …

85 css  z-index  transform 

jQueryを使用して要素を回転させるにはどうすればよい.animate()ですか？現在不透明度を正しくアニメーション化している以下の行を使用していますが、これはCSS3変換をサポートしていますか？ $(element).animate({ opacity: 0.25, MozTransform: 'rotate(-' + -amount + 'deg)', transform: 'rotate(' + -amount + 'deg)' });

82 jquery  transform 

私はd3とsvgのコーディングに不慣れで、グラフのxAxis上でテキストを回転させる方法を探しています。私の問題は、通常、xAxisのタイトルが棒グラフの棒よりも長いことです。そのため、テキストを回転させて、xAxisの下で（水平ではなく）垂直に実行することを検討しています。 変換属性を追加してみました：.attr（ "transform"、 "rotate（180）"） しかし、そうすると、テキストが完全に消えてしまいます。svgキャンバスの高さを上げようとしましたが、それでもテキストを表示できませんでした。 私が間違っていることについての考えは素晴らしいでしょう。xとyの位置も調整する必要がありますか？そして、もしそうなら、どれだけ（Firebugでそれを見ることができるときにトラブルシューティングするのは難しい）。

81 text  svg  transform  d3.js