- ベストアンサー
transform: translateとは
transform: translate(-50%, -50%);と下記サイトに記載があるのですが、 こちらを5にしても特に変化を感じません。 こちらは変形などを総合的にしている酢ようなことが記載してありましたが、 どのような意味で使っていると思いますか？ 位置をすらすというプロパティなのでしょうか？ 6. 波紋のようなエフェクトの部分 http://www.nxworld.net/tips/css-ghost-button-good-chemistry-hover-effect.html
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
5にしても……、当方は位置がずれました。 そこのみではなく、他のプロパティとセットで上下左右中央に表示させているように思います。よくある上下左右中央のチップスです。 transform: translate(-50%, -50%);だけだと、位置をずらしてると思います。
関連するQ&A
- a:hover 時にテキストが表示されません。
コード初心者です。 コピペしたものを若干数字を変えて使用しようとしましたが、テキストが表示されません。他の解説をみましたが、自分との違いがよく分からないため質問させていただきました。 以下htmlとcssを記載しますので、どなたかご教授いただけないでしょうか・・・・。 html <a href="#" class="button"> <section id="news"> <h2>お知らせ</h2> <p> 9月10日㈭ 遊びに来てね！！ </p> </section> </a> css #news{ width: 100%; height: 180px; margin: 0px auto 50px; border-radius: 10px; background-color: rgb(204, 160, 160); } .button{ position: relative; display: block; width: 90%; margin: 0 auto; transition: .3s; color: rgb(41, 35, 35); } .button:hover{ color: aliceblue; } .button::before { position: absolute; width: 100%; height: 180px; border-radius: 10px; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: ''; background: rgb(37, 59, 26); transform-origin: right top; transform: scale(0, 1); transition: transform .2s; } .button:hover::before { transform-origin: left top; transform: scale(1, 1); color: ghostwhite; } 宜しくお願い致します！！！！
- ベストアンサー
- CSS
- cssのanimationの設定の仕方
Animationの表示タイミングが合わないので教えてください。 今回初めてcssのanimationを使ってみました。 同時に、jQuery.BgSwitcher を使って背景画像５枚を５秒間づつ表示させてループさせています。（合計２５秒間）そして、cssのanimation でテキストA,B,Cの３枚を２５秒間表示させています。 表示タイミングは 【背景画像1を表示 テキストＡを表示 テキストＢを非表示 テキストＣを非表示】 【背景画像2を表示 テキストＡを非表示 テキストＢを非表示 テキストＣを非表示】 【背景画像3を表示 テキストＡを非表示 テキストＢを表示 テキストＣを非表示】 【背景画像4を表示 テキストＡを非表示 テキストＢを非表示 テキストＣを非表示】 【背景画像5を表示 テキストＡを非表示 テキストＢを非表示 テキストＣを表示】 背景画像で使用しているjQuery.BgSwitcherの表示時間は1枚５秒です。５枚ですので２５秒でループです。animationが適応されているテキストＡ，Ｂ，Ｃの animation-duration: 25s; にしています。 テキスト画像Ａ，Ｂ，Ｃは表示されるタイミングではopacity:1 にしてそれ以外はopacity:0で非表示にして背景画像1,2,3とテキストA,B,Cとの表示タイミングが合わせたいです。 初めはタイミングよく背景画像とテキスト画像が表示されているのですが徐々に表示タイミングずれてしまい５分ぐらいするとanimationのテキストA,B,Cの表示タイミングが背景画像と大きくずれ、例えばテキストＡが背景画像5で表示されるようになってしまいます。 jQuery.BgSwitcherでの背景画像５枚の１ループの時間は２５秒。animationのテキストA,B,Cのanimation-duration: 25s; なのですが、徐々にずれてしまいます。 animation側の設定に問題があるかもしれませんので教えていただけないでしょうか？ 現在のテストサイトは下記です。 http://cm-creation.net/yoshida/text-anime-test/index13.html どうぞよろしくお願いいたします。Cssとhtml設定は下記です。 ■cssの設定 .bg-slider { width: 99.1vw; height: 100vh; background-position:center center; background-size: cover; display: flex; justify-content: center; position: relative; } .textA { position: absolute; top: 5%; left:20%; animation-name:animation1; animation-duration:25s; animation-timing-function: ease-in-out; animation-delay: 0s; opacity: 0; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: forwards; } .textB { position: absolute; top: 5%; right:20%; animation-name:animation2; animation-duration:25s; animation-timing-function: ease-in-out; animation-delay: 0s; opacity: 0; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: forwards; } .textC { position: absolute; top: 5%; animation-name:animation3; animation-duration: 25s; animation-timing-function: ease-in-out; animation-delay: 0s; opacity: 0; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: forwards; } @keyframes animation1 { 0% { opacity: 0; transform: translate3d(0, 30px, 0); } 5% { opacity: 1; transform: translate3d(0, 0, 0); } 26% { opacity: 0; transform: translate3d(0, 0, 0); } 100% { opacity: 0; transform: translate3d(0, 0, 0); } } @keyframes animation2 { 0% { opacity: 0; transform: translate3d(0, 0px, 0); } 41% { opacity: 0; transform: translate3d(0, 30px, 0); } 45% { opacity: 1; transform: translate3d(0, 0, 0); } 66% { opacity: 0; transform: translate3d(0, 0px, 0); } 100% { opacity: 0; transform: translate3d(0, 0, 0); } } @keyframes animation3 { 0% { opacity: 0; transform: translate3d(0, 0px, 0); } 81% { opacity: 0; transform: translate3d(0, 30px, 0); } 85% { opacity: 1; transform: translate3d(0, 0, 0); } 101% { opacity: 0; transform: translate3d(0, 0px, 0); } 102% { opacity: 0; transform: translate3d(0, 0, 0); } } ■html <script> jQuery(function($) { $('.bg-slider').bgSwitcher({ images: image/main10.jpg','image/main11.jpg','image/main12.jpg','image/main13.jpg','image/main14.jpg'], // 切り替える背景画像を指定 interval: 5000, // 背景画像を切り替える間隔を指定 5000=5秒 loop: true, // shuffle: false, // effect: "fade", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定 duration: 500, // エフェクトの時間を指定します。 easing: "swing" // エフェクトのイージングをlinear,swingから指定 }); }); </script> <div class="container-fluid px-0 bg-slider " > <div class="textA"><img src="image/item8.png" class="img-fluid" alt=""/></div> <div class="textB"><img src="image/item9.png" class="img-fluid" alt=""/></div> <div class="textC"><img src="image/item10.png" class="img-fluid" alt=""/></div> </div>
- ベストアンサー
- HTML
- 固定ナビがコンテンツの下になる
自作ページを作成しており、ヘッダー部分で固定される固定ナビを設置しようとしています。試しに設置したのですが、スクロール時にページ内の画像などのコンテンツが固定ナビの下を通過せず上を通過してしまいます。 何か問題解決の手段はないでしょうか。 ・「position: relative」が原因と思われ、ナビの上を通過するコンテンツには大方これが使われています。（「position: relative」を消さないやり方をお願いします。） ・固定ナビには「Sticky Header CSS Transition（https://codepen.io/soulrider911/pen/dGuEn）」を使っています。 ・ナビの上を通過するのは、吹き出し（https://saruwakakun.com/html-css/reference/speech-bubble）を設定したものと、「shuffle.js」で作った画像の一覧、さらにキャプションエフェクト（https://www.nxworld.net/tips/css-only-caption-effect.html）です
- ベストアンサー
- CSS
- 画像の切り替えについてです。
中途半端な知識で対応できず、苦しんでおります。 http://www.kanaya440.com/contents/tips/html/007.html 上のURLのサイト中段あたりにある「グローバルメニューに応用する」方法を参考に ８枚の画像をつなげた１枚の画像を使用でロールオーバーをCSSでやって出来たのですが この方法では、画像にマウスを乗せてたところが、画像からマウスが離れると最初の画像表示に戻ってしまい また、クリックした時の画像切り替え方法が記載されてないので、できれば更に、この方法に付け加える形で… 画像をクリックした時の画像切り替えするには、どうすればよいのでしょうか？ イメージとしては、クリックした時も a:hover した時と同じ画像表示のままになるようにしたいのです。 ちなみに、分かりやすく詳しく教えて頂けると非常に助かります。 もし宜しければ何方か教えて下さい。宜しくお願いします。
- ベストアンサー
- JavaScript
- 時間差で要素が出てくるエフェクトを導入
http://ziyudom.com/js-delay/を参考に時間差で要素が出てくるエフェクトを導入したかったのですが、うまくいきません。 いっぺんに時間差なく行われてしまいます。 一つ終わって次という形にしたいです。 ないしはほんの少し差をつけたいです。 スクロールがカキはできないのですかね。うまく再現できていませんがソースはわかると思います。スクロールの仕方があれば教えてください。 http://codepen.io/anon/pen/WGqjZZ ・css .js-translate3d-lower-right,.js-translate3d-lower-right-2,.js-translate3d-lower-right-3 { opacity : 0;/* 対象の要素の初期の不透明度 */ transform: translate3d(-1rem,-2rem,-1rem); /*transform : translate(5rem, 0);横からスライド*/ transition : all 500ms; } ・動くがいっぺんに動いてしまう。 var $deferredAnim = $.Deferred( function( deferredAnim ){ //thenでファンクション名を繋げる deferredAnim.then(anim_01) .then(anim_02) .then(anim_03) }); //実行 $deferredAnim.resolve(); function anim_01 (){ $(function(){ $(window).scroll(function (){ $('.js-translate3d-lower-right').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ $(this).addClass('scrollin'); } }); }); }); } function anim_02 (){ $(function(){ $(window).scroll(function (){ $('.js-translate3d-lower-right-2').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ $(this).addClass('scrollin'); } }); }); }); } function anim_03 (){ $(function(){ $(window).scroll(function (){ $('.js-translate3d-lower-right-3').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ $(this).addClass('scrollin'); } }); }); }); } ・こちらだと動かない最後の｝にエラーと出る $(function(){ $(window).scroll(function (){ $('.js-translate3d-lower-right').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ $(this).addClass('scrollin'); } }); }); } function anim_02 (){ $(window).scroll(function (){ $('.js-translate3d-lower-right').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ $(this).addClass('scrollin'); } }); }); } function anim_03 (){ $(window).scroll(function (){ $('.js-translate3d-lower-right').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ $(this).addClass('scrollin'); } }); }); }
- ベストアンサー
- JavaScript
- 庫県神戸の芦屋の人身売買ディーラーが逮捕された？
庫県神戸の芦屋の人身売買ディーラーが逮捕された？ 医師装いわいせつ画像要求 ブログ掲載容疑で役員逮捕 http://www.nxworld.net/tips/css-only-button-design-and-hover-effects.html 兵庫県芦屋市岩園町にある医療機器メーカー「メディックス」の代表取締役・京原宏明は人身売買のディーラーだったのでしょうか？ 結婚を望む女性の裸体写真を収集していたようですが、結婚相談所というところは女性の裸体写真の提出も必要なのかおかしい点が多いですよね。 なぜ女性は裸体写真を提出したのでしょう？ この男性はその裸体写真をブログに載せていたようで、人身売買のディーラーってことですよね。 神戸の芦屋と言えばセレブの街なので、セレブが買っていたのでしょうか。 この人のブログを知っていますか？この人は人身売買のディーラーですよね？ 芦屋の人は女性をペットに出来て羨ましいです。 本文を読むと主に医者が買っていたと記載されているので、芦屋警察署は芦屋の医療施設に家宅捜索に動きますかね？
- ベストアンサー
- ニュース・時事問題
- transform(-1, 0, 0, 1, 0,
HTML5 CANVASで transform(-1, 0, 0, 1, 0, 0) と書かれているコードがあるのですが、どういう意味でしょうか？ ・特に第1引数が分かりません ・伸縮xが-1？
- ベストアンサー
- JavaScript
- マウスのロールオーバーについて
ブログのサイトタイトルの下にメニューバーをつけました。 メニューバーにマウスが乗った時、色を変えたいのですがCSSを書いたどの箇所に、 a:hover { color:#999; text-decoration:underline; } などのタグを入れたらいいのが分かりません。 どなたかお教えお願いします。 ／＊HTML＊／ <div id="global"> <button class="button"> <span> </span> <span> </span> <span> </span> </button> <nav class="items"> <a href="#" class="item">サンプル</a> <a href="#" class="item">サンプル</a> <a href="#" class="item">サンプル</a> <a href="#" class="item">サンプル</a> </nav> </div> <div id="overlday"> </div> ／＊CSS ＊／ #global { display: block; width: 100%; box-sizing: border-box; margin-top: 0px; background-color: #000000; } #global .button, #overlday { display: none; } #global .items { display: flex; justify-content: center; } #global .items > .item { display: block; color: #fff; text-decoration: none; box-sizing: border-box; padding: 30px 30px; border-right: 1px solid #fff; border-left: 1px solid #fff; } #global .items > .item:last-of-type { border-right: 1px solid #fff; } @media only screen and (max-width: 768px) { #overlday { display: none; position: fixed; z-index: 9; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .65); } #overlday.active { display: block; } #global { position: fixed; z-index: 10; left: 0; top: 0; text-align: right; margin-top: 0; background-color: transparent; } #global .button, #global .button > span { display: inline-block; transition: all .4s; box-sizing: border-box; } #global .button { position: relative; width: 40px; height: 30px; border: none; cursor: pointer; background: transparent; margin: 10px; } #global .button > span { position: absolute; left: 0; width: 100%; height: 4px; background-color: #ffffff; border-radius: 4px; } #global .button > span:nth-of-type(1) { top: 0; } #global .button > span:nth-of-type(2) { top: 13px; } #global .button > span:nth-of-type(3) { bottom: 0; } #global.active .button > span { background-color: #fff; } #global.active .button > span:nth-of-type(1) { transform: translateY(13px) rotate(-45deg); } #global.active .button > span:nth-of-type(2) { opacity: 0; } #global.active .button span:nth-of-type(3) { transform: translateY(-13px) rotate(45deg); } #global .items { display: none; flex-wrap: wrap; text-align: left; background-color: #9c9c9c; } #global.active .items { display: flex; } #global .items > .item { width: 100%; padding: 10px; border-right: none; border-bottom: 1px solid #fff; } #global .items > .item:last-of-type { border-bottom: none; } }
- ベストアンサー
- CSS
- Transformのエラー
お世話になります。 XMLを本を見ながら勉強中、Javaを利用してXSLを適用しなくてはならない箇所があり、本に記載の方法で初めてJavaなるものを利用してみたのですが、エラーが出てしまって本来の目的であるXMLの勉強が進まない状況に陥ってしまいました。 解決方法についてご助言いただければ幸いです。 ■環境 J2SE JDK1.5.0_06 OS：Win2K ■状況 DOSより以下のコマンドを走らせました。 C\hoge>java Transform sample1.xml sample1.xsl result.xml エラーは Exception in thread "main" java.lang.NoClassDefFoundError: Transform とのことです。 Transformというクラスファイル（？）が必要なのかと、本の発行者HPに訪れたら"Transform.class"というバイナリファイルが存在していたので、サンプルのxmlファイルがある同一フォルダに落としてから、再度コマンドを打ってみましたが、問題が解決されません。 コンパイル前のTransform.javaも念のため記載します。 よろしくお願い致します。 [Transform.java] import java.io.*; import javax.xml.transform.*; import javax.xml.transform.stream.*; public class Transform { public static void main(String args[]) throws Exception { StreamSource in = new StreamSource(new File(args[0])); StreamSource ss = new StreamSource(new File(args[1])); StreamResult out = new StreamResult(new File(args[2])); TransformerFactory tff = TransformerFactory.newInstance(); Transformer tf = tff.newTransformer(ss); tf.transform(in,out); System.out.println(args[2] + "Output OK!"); } }
- ベストアンサー
- Java
- ☆ Can you translate？ ♪
和訳に手こずっています。 どなたか手伝ってくださいませんか？ 一つめはそれほど難しい構文ではありませんが、うまく訳せません。 A journey across America is a journey through a bewildering array of scenary and cultures that leaves the traveler with a host of conflicting impressions and opinions. 二つ目はずっと簡単な構文ですが、最初の文よりテクニックがいるようです。 Is your sister older or younger than you? 最後にごく初歩的な英文ですが、たかが固有名詞侮れません。 Hello. My name is Lindsay Daenem. I'm from Belgium. This is my best friend, Malin Reitan. She's from Norway. And this is the year's champion Kseniya Sitnik. She's from Belarus. どれか一つ自信のあるので構いませんので、お手伝いいただければ幸いです。
- ベストアンサー
- 英語
お礼
gulpが動いていませんでした。 位置を調整しているのですね。