CSS用动画演示offset-rotate, transform: rotate和rotate的差别

offset-rotate vs transform:rotate vs rotate with transform-origin，用css motion path来实现的旋转演示动画。

css, transform, rotate

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1561
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

section {
    width: 244px;
    height: 200px;
    margin-bottom: 60px;
    border: 2px dashed lightgrey
}
h1 {
    width: 100%;
    font-family: monospace;
    font-size: 150%;
    text-align: center;
    margin-bottom: 50px;
}
body {
    display: flex;
    padding: 10px;
    flex-wrap: wrap;
    gap: 30px;
    margin: 0;
    height: 100vh;
    justify-content: center;
    align-items: flex-start;
    --angle: 33deg;
}
div {
    width: 50px;
    height: 50px;
    border: 1px solid hsl(343, 100%, 58%, .3);
    border-right: 5px solid hsl(343, 100%, 58%);
    background: hsla(343, 100%, 58%, var(--opacity, .3));
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: monospace, sans-serif;
}
.pathed {
    offset-path: path('M0,0 C40,240 200,240 240,0');
    position: absolute;
    animation: distance 4000ms infinite alternate ease-in-out;
}
:not(.t-o) > .rotated.pathed::after {
    content: '';
    width: 4px;
    height: 4px;
    --opacity: 1;
    background: hsla(343, 100%, 58%, var(--opacity, .3));
    border-radius: 50%;
}
.t-o .pathed,
.t-o svg {
    transform-origin: 0px 0px;
}
.transformed {
    transform: rotate(var(--angle));
}
.offseted {
    offset-rotate: auto var(--angle);
}
.rotated {
    rotate: var(--angle);
}
@keyframes distance {
    100% {
        offset-distance: 100%;
    }
}
code {
    position: absolute;
    top: -40px;
    right: 10px;
    left: 10px;
    line-height: 1.5;
    font-size: 100%;
    text-align: center;
}
section {
    position: relative;
}
* {
    box-sizing: border-box;
}
svg {
    position: absolute;
    opacity: .333;
    stroke-width: 2px;
    transform-origin: 25px 25px;
}
.anchor {
    border-radius: 50%;
    border: none;
    width: 4px;
    height: 4px;
    --opacity: 1;
}
.t-o .anchor {
    transform: translate(-2px, -2px);
}
p {
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
}
@supports (offset-path: path('M0,0')) {
    #support-cmp {
        display: none;
    }
}
@supports (rotate: 33deg) {
    #support-itp {
        display: none;
    }
}

HTML

<p id="support-cmp">Your browser does not support CSS Motion Path</p>
<p id="support-itp">Your browser does not support independent transform properties</p>
<h1>transform-origin: 50% 50%;</h1>
<section class="">
    <svg viewBox="0 0 240 200">
        <path d="M0,0 C40,240 200,240 240,0" fill="none" stroke="lightgrey" />
    </svg>
    <div class="pathed offseted"></div>
    <div class="pathed anchor"></div>
    <code>offset-rotate: auto 33deg</code>
</section>

<section class="">
    <svg viewBox="0 0 240 200">
        <path d="M0,0 C40,240 200,240 240,0" fill="none" stroke="lightgrey" />
    </svg>
    <div class="pathed transformed"></div>
    <div class="pathed anchor"></div>
    <code>transform: rotate(33deg)</code>
</section>

<code>rotate: 33deg</code>
</section>

<h1>transform-origin: 0px 0px;</h1>
<section class="t-o">
    <svg viewBox="0 0 240 200">
        <path d="M0,0 C40,240 200,240 240,0" fill="none" stroke="lightgrey" />
    </svg>
    <div class="pathed offseted"></div>
    <div class="pathed anchor"></div>
    <code>offset-rotate: auto 33deg</code>
</section>

<section class="t-o">
    <svg viewBox="0 0 240 200">
        <path d="M0,0 C40,240 200,240 240,0" fill="none" stroke="lightgrey" />
    </svg>
    <div class="pathed transformed"></div>
    <div class="pathed anchor"></div>
    <code>transform: rotate(33deg)</code>
</section>

<code>rotate: 33deg</code>
</section>

offset-rotate vs transform:rotate vs rotate with transform-origin，用css motion path来实现的旋转演示动画。

css, transform, rotate

编辑器支持Emmet

快捷键

offset-rotate vs transform:rotate vs rotate with transform-origin，用css motion path来实现的旋转演示动画。

css, transform, rotate

使用CSS3 PerspectiveTransform实现的逼真3D地球自转动画

6个使用CSS3 transform-origin属性实现的方形翻转动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：