From afc2f5469aed192d0cf5063781b65ee4788e5012 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 6 Jan 2022 22:34:53 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/css/filter-function/hue-rotate()/index.md | 89 ++++++++++------------ 1 file changed, 40 insertions(+), 49 deletions(-) diff --git a/files/ja/web/css/filter-function/hue-rotate()/index.md b/files/ja/web/css/filter-function/hue-rotate()/index.md index bdae24f1cc..8170c4c277 100644 --- a/files/ja/web/css/filter-function/hue-rotate()/index.md +++ b/files/ja/web/css/filter-function/hue-rotate()/index.md @@ -3,68 +3,59 @@ title: hue-rotate() slug: Web/CSS/filter-function/hue-rotate() tags: - CSS - - CSS Function - - Filter Effects - - Function - - Reference + - CSS 関数 + - フィルター効果 + - 関数 + - リファレンス +browser-compat: css.types.filter-function.hue-rotate translation_of: Web/CSS/filter-function/hue-rotate() --- -
{{cssref}}
+{{CSSRef}} -

hue-rotate()CSS の関数で、要素およびその中身のコンテンツの色相環を回転します。結果は {{cssxref("<filter-function>")}} です。

+**`hue-rotate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素およびその中身のコンテンツの[色相環](https://ja.wikipedia.org/wiki/%E8%89%B2%E7%9B%B8)を回転させます。結果は {{cssxref("<filter-function>")}} です。 -
{{EmbedInteractiveExample("pages/css/function-hue-rotate.html")}}
+{{EmbedInteractiveExample("pages/css/function-hue-rotate.html")}} - +## 構文 -

構文

+```css +hue-rotate(angle) +``` -
hue-rotate(angle)
+### 引数 -

引数

+- `angle` + - : 入力サンプルの色相の相対的な変化量を、 {{cssxref("<angle>")}} で指定します。 `0deg` は入力を変更しないままにします。正の回転角は色相の値を増加させるのに対し、負の回転角は色相の値を減少させます。補間時の欠損値は `0` です。最小値または最大値はなく、 `hue-rotate(Ndeg)` は `N` を 360 で割った余りと等価です。 -
-
angle
-
入力サンプルの色相の相対的な変化量を、 {{cssxref("<angle>")}} で指定します。 0deg は入力を変更しないままにします。正の回転角は色相の値を増加させるのに対し、負の回転角は色相の値を減少させます。補間時の欠損値は 0 です。最小値又は最大値はなく、 hue-rotate(Ndeg)N を 360 で割った余りと等価です。
-
+## 例 -

+### hue-rotate の正しい値の例 -
hue-rotate(-90deg)  /* 270度の回転と同じ */
+```css
+hue-rotate(-90deg)  /* 270 度の回転と同じ */
 hue-rotate(0deg)    /* 効果なし */
-hue-rotate(90deg)   /* 90度の回転 */
-hue-rotate(.5turn)  /* 180度の回転 */
-hue-rotate(405deg)  /* 45度の回転と同じ */
-
+hue-rotate(90deg) /* 90 度の回転 */ +hue-rotate(.5turn) /* 180 度の回転 */ +hue-rotate(405deg) /* 45 度の回転と同じ */ +``` -

仕様書

+## 仕様書 - - - - - - - - - - - - - -
仕様書状態
{{SpecName('Filters 1.0', '#funcdef-filter-hue-rotate', 'hue-rotate()')}}{{Spec2('Filters 1.0')}}
+{{Specifications}} -

関連情報

+## ブラウザーの互換性 - +{{Compat}} + +## 関連情報 + +- {{cssxref("<filter-function>")}} +- {{cssxref("filter-function/blur()", "blur()")}} +- {{cssxref("filter-function/brightness()", "brightness()")}} +- {{cssxref("filter-function/contrast()", "contrast()")}} +- {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} +- {{cssxref("filter-function/grayscale()", "grayscale()")}} +- {{cssxref("filter-function/invert()", "invert()")}} +- {{cssxref("filter-function/opacity()", "opacity()")}} +- {{cssxref("filter-function/saturate()", "saturate()")}} +- {{cssxref("filter-function/sepia()", "sepia()")}} -- cgit v1.2.3-54-g00ecf