offset-rotate
Baseline
åºãå©ç¨å¯è½
ãã®æ©è½ã¯åºãå®è£ ããã¦ãããå¤ãã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã©ã¦ã¶ã¼ã§åä½ãã¾ãã2022å¹´9æ以éããã¹ã¦ã®ãã©ã¦ã¶ã¼ã§å©ç¨å¯è½ã§ãã
offset-rotate 㯠CSS ã®ããããã£ã§ãè¦ç´ ã offset-path ã«æ²¿ã£ã¦é
ç½®ãããå ´åã®åã/æ¹åãå®ç¾©ãã¾ãã
試ãã¦ã¿ã¾ããã
offset-rotate: auto;
offset-rotate: 90deg;
offset-rotate: auto 90deg;
offset-rotate: reverse;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element"></div>
<button id="playback" type="button">åç</button>
</section>
#example-element {
width: 24px;
height: 24px;
background: #2bc4a2;
offset-path: path("M-70,-40 C-70,70 70,70 70,-40");
animation: distance 8000ms infinite linear;
animation-play-state: paused;
clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
}
#example-element.running {
animation-play-state: running;
}
#playback {
position: absolute;
top: 0;
left: 0;
font-size: 1em;
}
@keyframes distance {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
/* è¦ç´ ãå¾ããã¹ãåç
§ããç»åãæä¾ãã */
#default-example {
position: relative;
background-position: calc(50% - 12px) calc(50% + 14px);
background-repeat: no-repeat;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-75 -45 150 140" width="150" height="140"><path d="M-70,-40 C-70,70 70,70 70,-40" fill="none" stroke="lightgrey" stroke-width="2" stroke-dasharray="4.5"/></svg>');
}
const example = document.getElementById("example-element");
const button = document.getElementById("playback");
button.addEventListener("click", () => {
if (example.classList.contains("running")) {
example.classList.remove("running");
button.textContent = "åç";
} else {
example.classList.add("running");
button.textContent = "åæ¢";
}
});
ã¡ã¢:
åæã®ããã®ä»æ§æ¸ã§ã¯ããã®ããããã£ã motion-rotation ã¨å¼ãã§ãã¾ããã
æ§æ
/* ãã¹ã®æ¹åã«å¾ããä»»æã§è§åº¦ã追å */
offset-rotate: auto;
offset-rotate: auto 45deg;
/* ãã¹ã®æ¹åã«å¾ãããauto ã¨ã¯éã®æ¹åãåã */
offset-rotate: reverse;
/* ãã¹ã®ä½ç½®ã«é¢ä¿ãªãã決ããããå転ãç¶æãã */
offset-rotate: 90deg;
offset-rotate: 0.5turn;
/* ã°ãã¼ãã«å¤ */
offset-rotate: inherit;
offset-rotate: initial;
offset-rotate: revert;
offset-rotate: revert-layer;
offset-rotate: unset;
auto-
è¦ç´ ã¯æ£æ¹åã® X 軸ããè¦ã
offset-pathæ¹åã®è§åº¦ã§å転ãã¾ãããããæ¢å®å¤ã§ãã <angle>-
è¦ç´ ã¯æå®ãããå転è§ã«ãã£ã¦ãæè¨æ¹åã«åºå®å¤ã§å転å¤æããã¾ãã
auto <angle>-
autoã«<angle>ãç¶ããå ´åããã®è§åº¦ãautoã®è¨ç®å¤ã«å ç®ããã¾ãã reverse-
è¦ç´ ã¯
autoã¨åæ§ã«å転ãã¾ãããå対æ¹åãåãã¾ããauto 180degã®å¤ãæå®ããã®ã¨åçã§ãã
å ¬å¼å®ç¾©
| åæå¤ | auto |
|---|---|
| é©ç¨å¯¾è±¡ | 座æ¨å¤æå¯è½è¦ç´ |
| ç¶æ¿ | ãªã |
| è¨ç®å¤ | æå®éã |
| ã¢ãã¡ã¼ã·ã§ã³ã®ç¨®é¡ | <angle>, <basic-shape>, <path()> ã®ä½ããã¨ã㦠|
å½¢å¼ææ³
offset-rotate =
[ auto | reverse ] ||
<angle>
ä¾
ãªãã»ãããã¹ã«æ²¿ã£ã¦è¦ç´ ã®æ¹åãè¨å®
HTML
<div></div>
<div></div>
<div></div>
CSS
div {
width: 40px;
height: 40px;
background: #2bc4a2;
margin: 20px;
clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
animation: move 5000ms infinite alternate ease-in-out;
offset-path: path("M20,20 C20,50 180,-10 180,20");
}
div:nth-child(1) {
offset-rotate: auto;
}
div:nth-child(2) {
offset-rotate: auto 90deg;
}
div:nth-child(3) {
offset-rotate: 30deg;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
çµæ
ä»æ§æ¸
| ä»æ§æ¸ |
|---|
| Motion Path Module Level 1 # offset-rotate-property |