| CARVIEW |
Select Language
HTTP/2 200
content-type: text/html
x-guploader-uploadid: AAwnv3Ikj_DktDVxCxx87NWLgM4oMl3yeApPGwStmZZprDjlf36BeCSYnEhrPQTLyutK55Fk
cache-control: public, max-age=3600
expires: Fri, 10 Oct 2025 05:28:20 GMT
last-modified: Fri, 10 Oct 2025 01:11:45 GMT
etag: W/"b45a6373a99e548b04e156e47678eb3f"
x-goog-generation: 1760058705422124
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 276771
x-goog-meta-goog-reserved-file-mtime: 1760056722
x-goog-hash: crc32c=2fE4SA==, md5=tFpjc6meVIsE4VbkdnjrPw==
x-goog-storage-class: STANDARD
accept-ranges: none
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: b9fce26076956208acb167551a282c7f
date: Fri, 10 Oct 2025 04:28:20 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
asin() - CSS: カスケーディングスタイルシート | MDN
Toggle sidebar
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
asin()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2023年3月.
asin() は CSS の関数で、-1 から 1 までの数値の逆正弦を返す三角関数です。この関数には、 -90deg から 90deg までの <angle> を表すラジアンの数を返す単一の計算が含まれています。
構文
css
/* 単一の <number> 値 */
transform: rotate(asin(-0.2));
transform: rotate(asin(2 * 0.125));
/* その他の値 */
transform: rotate(asin(pi / 5));
transform: rotate(asin(e / 3));
引数
asin(number) 関数は、引数として 1 つの値のみを受け入れます。
返値
number の逆正弦で、常に <angle> であり、 -90deg と 90deg の間です。
numberが-1より小さいか1より大きい場合、結果はNaNになります。numberがちょうど1の場合、結果は0になります。
形式文法
<asin()> =
asin( <calc-sum> )
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> =
<calc-value> [ [ '*' | / ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
例
要素の回転
asin() 関数は <angle> を返すので、要素の回転 (rotate) に使用することができます。
HTML
html
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
CSS
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
gap: 50px;
}
css
div.box {
width: 100px;
height: 100px;
background: linear-gradient(orange, red);
}
div.box-1 {
transform: rotate(asin(1));
}
div.box-2 {
transform: rotate(asin(0.5));
}
div.box-3 {
transform: rotate(asin(0));
}
div.box-4 {
transform: rotate(asin(-0.5));
}
div.box-5 {
transform: rotate(asin(-1));
}
結果
仕様書
| Specification |
|---|
| CSS Values and Units Module Level 4 # trig-funcs |
ブラウザーの互換性
Loading…