CSSで画像を左右反転させる方法
scaleでは、負の値が設定できます。 x軸でマイナス1を設定すると、あら不思議。 左右反転させることが出来ます。 ぼくは業務でもかなりの頻度で使っています。 rotate(180deg)でもできるけど… 左右対称の画像の場合、rotate(180deg) で180度回転させることでも反転させられます。 .flip-horizontal { transform: rotate(180deg); } ただし、こちらはあまりおすすめできません。 画像の中心がずれている場合、きれいに左右反転させることができないのです。 これは transform-origin: 50% 50% を指定しても解決できません。 ですので、画像の反転は transform: rotate(-1, 1) がおすすめです。 上下反転するには もし上下反転させたければ、scale(1, -1) とy軸に設定すればいいのです
Compressor.io - optimize and compress JPEG photos and PNG images
Fast & efficient imagecompressionOptimize JPEG, PNG, SVG, GIF and WEBP
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
jQuery.lightpop.js サンプル
jQuery用のプラグインjQuery.lightpop.jsのサンプルです。 使用方法・ダウンロードはこちらからどうぞ。 画像 サンプル <a href="media/pict01.jpg" rel="lightbox" title="画像１"> <img src="media/pict01.thumbnail.jpg" alt="画像１"> </a> <a href="media/pict02.jpg?width=320&height=240" rel="lightbox" title="画像２"> <img src="media/pict02.thumbnail.jpg" alt="画像２"> </a> 画像３テキストリンク <a href="media/pict03.jpg" rel="lightbox" title="画像３">画像３テキストリンク</a> 画像４テキストリンク
[JS]多彩なカスタマイズが可能な画像を拡大するスクリプト -Lightview | コリス
Lightviewは、LightBox風に画像を拡大するスクリプトで、多彩なオプションで拡大表示時のカスタマイズが可能です。 Lightview Lightviewは、単独の画像拡大をはじめ、連番での送り機能や自動スライドショー機能を備えています。 デフォルトの状態でも快適に動作しますが、下記の多彩なオプションで画像の拡大表示時のカスタマイズが可能です。 backgroundColor 背景色 border ボーダーのサイズ buttons.opacity ボタン不透明度 effects Scriptaculousの効果 images lightview.jsからみたディレクトリ imgNumberTemplete 画像のナンバリング overlay オーバーレイ radus 角丸の半径 sideshow.delay スライドの表示タイミング titleCaptionSplit タイトルと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フリー写真素材｜Photo Chips
