独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック！ - ICS MEDIA
独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック！ CSSのtransformプロパティはtranslate()やrotate()を1つの値として受け取るプロパティでした。そのため、同時にそれらを動かしたい場合、1つのプロパティに両方の記述が必要でした。これは記述の複雑化を生みます。 最新のCSSではtranslate、rotate、scaleをプロパティとして独立して指定できるようになりました。これにより複雑な記述をせずとも別々のタイムラインの指定やイージングの指定など柔軟なアニメーション表現が可能になりました。本記事では独立した特長とそれらを活かしたアニメーション表現を紹介します。 サンプルを別ウインドウで開く コードを確認する 独立したtranslate、rotate、scaleプロパティ 独立した各プロパティについて
早く言ってよ〜！CSSのtransformは同じ関数を複数回つかってもOKだった | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアのつっちーです。 .foo { transform: translateX(-50%) translateX(10px); } みなさんは、このCSSが有効であること、ご存じだったでしょうか。CSSのtransformプロパティでは、このように同じ関数を複数回使用できます。transformにはもう何年もお世話になってきたというのに、このことは最近になって初めて気が付きました……。「そんなことも知らなかったの？」という方がほとんどだとは思いますが、忘れてしまわないように記事に残しておきます。 たとえばこんなときに 複数の単位で移動距離を指定 See the Pen Multiple Transform Functions 1 by dsktschy (@dsktschy) on CodePen. See the Pen Multiple Transform Funct
ほんの数行のCSSで実装できる小技テクニック12個まとめ 【簡単＆実用的】
ウェブがますます進化することで、表現の可能性がぐんと広がっており、CSSはその代表と言えます。 ほんの数年前までJavaScriptなどで実装していた複雑な仕様も、CSSのみで実現できるようになってきています。 この記事では、ほんのわずかなCSSで実装できる小技テクニック12個をまとめてご紹介します。 Web制作で活用できる、実用性の高いテクニックを中心に揃えています。ソースコードは、「HTML」と「CSS」タブを切り替えることで確認できます。 CSSで実装できる小技テクニック目次 1. テキストグラデーション 2. 左線グラデーション付きの見出しタイトル 3. アニメーション付ボーダーライン 4. テキストリンクがすーっと通過するホバーエフェクト 5. リンク用CSSラインホバーアニメーション 6. SVGで画像の周りをデコレーション 7. 文字テキストを回転させる方法 8. 長い文章を
これなら簡単！数字や文字のパネルをぱたぱた回転させるフリップを実装できるスクリプト -Flip Countdown
カウントダウン、カウンター、タイマー、メッセージなど、数字や文字のパネルをぱたぱた回転させるフリップを簡単に実装できるスクリプトを紹介します。 ぱたぱた回転するアニメーションが非常に気持ちよく、今まで紹介した中でもピカイチだと思います。 クイックフリップ 高性能フリップアニメーション、フリップカードはオーバーラップできます。値は毎秒複数回更新。 タイムスナップ タイマーのアルゴリズムはJavaScriptのsetIntervalを自動的に修正するため、高精度の間隔精度が得られます。 サーバー同期 追加の構成要件なしで、クライアントとサーバーの時刻を自動的に同期。 Tickエンジン Flipの背後にあるTickエンジンは、豊富なカウンターテンプレートの構築と変換構成をサポート。 対応ブラウザは、下記の通りです。 Chrome Firefox Edge Opera Safari 9+ iOS
コインのようにくるくる回転するフリップアニメーションを作ってみよう【いろんな動きを作ってみようシリーズ】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのはっちゃんです。 今日は「スマホやタブレットで見たときだけ、コインがフリップでめくれるようなアニメーション」を作っていきたいと思います。 前回の記事と組み合わせると、LIGブログのメンバーページと同じ仕様になります。 画像を用意 前回同様、表と裏の画像を用意します。 HTML 前回のHTMLを少しだけ修正します。JSのトリガーとなるclassを追加します。 <div class="flip js-flip"><!-- js-flipを追加 --> <div class="flip-inner js-flip-inner"><!-- js-flip-innerを追加 --> <div class="front"> <img class="thumbnail" src="https://82mou.github.io/src/images/coin-omo
ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作を可能にする万能JavaScriptライブラリ -Moveable
ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作できるようにするJavaScriptライブラリを紹介します。 単体で利用でき、React, Preact, Angular, Vueにも対応しています。 Moveable -GitHub Moveableの特徴 Moveableのデモ Moveableの使い方 Moveableの特徴 Moveableはページ上のあらゆる要素をドラッグ・リサイズ・スケール変更などを可能にするTypeScriptで実装されたライブラリです。MITライセンスで、商用のプロジェクトでも無料で利用できます。 Draggable ターゲットをドラッグおよび移動する機能 Resizable ターゲットの幅と高さを増減する機能 Scalable ターゲットのx軸・y軸のスケールを増減する機能 Rotatable ターゲットを回転さ
コインのようにくるくる回転するホバーアニメーションを作ってみよう【いろんな動きを作ってみようシリーズ】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのはっちゃんです。 今日は「コインがホバーで回転するアニメーション」を作っていきたいと思います。 LIGブログのメンバーページでも使われていますが、メンバーページのものはスマホでフリップした際のアニメーションもつけているので、ちょっと高度です。 今回紹介するものは、ホバーのみのアニメーションです。 画像を用意 表と裏の画像を用意します。とりあえず自分の画像を使うことにします。 コーディングの考え方 コインの表と裏をposition: absolute;で重なり合うようにする コインの裏は、めくったときに反転してしまうので、transform: rotateY(180deg);であらかじめ回転させておく .flip-innerにpreserve-3dをつけて、子要素に3Dの概念を適用する コイン両面にbackface-visibility: hidden;
CSS 画像を回転させる方法 - by Takumi Hirashima
CSS で画像を回転させる方法を紹介します。 例えば、画像を表示するときの演出で使用するのにおすすめのテクニックです。 CSS で画像を回転させる方法 CSS で画像をX軸回転させる方法 CSS で画像をY軸回転させる方法 CSS で画像をZ軸回転させる方法 画像の回転をアニメーションさせる方法 回転する画像を立体的（3D）にする方法 hover した時に画像を回転させる方法 CSS で画像を回転させる方法 画像を回転させる方法 CSS の transform プロパティ rotate() を使います。 例えば、画像を時計回りに45度回転させるには rotate(45deg) を指定します。 CSS の指定は次のようになります。 img { transform: rotate(45deg); } 指定できる数値は 0 から 360 の間でマイナスの指定も可能です、数値の最後には単位 deg
商品を360度回転できる画像ビューワーを簡単に実装できるスクリプト -JS Cloudimage 360 View
商品の画像を複数枚用意することで、商品を360度ぐるぐる回転できる画像ビューワーを簡単に実装できるスクリプトを紹介します。 操作はかなり快適で、単体で動作するスクリプトです。 JS Cloudimage 360 View JS Cloudimage 360 View -GitHub JS Cloudimage 360 Viewの特徴 JS Cloudimage 360 Viewのデモ JS Cloudimage 360 Viewの使い方 JS Cloudimage 360 Viewの特徴 JS Cloudimage 360 Viewは商品の画像を複数枚用意することで、バーチャルツアーを提供できるシンプルでインタラクティブなJavaScriptライブラリです。 サポートブラウザは、IE9, 10, 11を含む、すべてのモダンブラウザです。 商品はユーザーが360度回転させることができ、拡大に
CSSだけで3Dなカルーセル
Result 数年前に見かけた懐かしい感じの3Dなカルーセルです。 CSSだけで出来る時代になりましたね。 css#slideshow {/*全体*/ margin: 0 auto; padding-top: 50px; height: 600px; width: 100%; background-color: #ddd; box-sizing: border-box; } .entire-content {/*カルーセルの見栄え。perspectiveで奥行きを設定する*/ margin: auto; width: 190px; perspective: 1000px; position: relative; padding-top: 80px; } .content-carrousel {/*各画像を包括、アニメーションを設定*/ width: 100%; position: abso
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS 回転の基準点を変更する方法 - by Takumi Hirashima
CSSでこんな実装ができるとは！ 美しい光がきらり✨とボーダーに沿って回転するボタン -Button Shimmer Tricks
https://codepen.io/YusukeNakaya/pen/OGwmOV