CSS 圓形與橢圓形排版
- February 17, 2023
最近遇到了斜橢圓形 CSS 排版的需求，查詢網路上的文章，做圓形排版或繞圓動畫主要都是用 3D 的方式進行，但我的需求其實是 2D 的，設定的目標是把圓畫出來後，可以很輕易的將物體對圓繞著轉，花了一些時間思考跟測試，最後有了比較簡易的寫法，因此用此邊文章記錄下來。
以下會分別介紹圓形排版、橢圓形排版，以及排版後如何使圓上的物體繞著圓轉做動畫。
圓形排版
圓形排版非常簡單，只需要用 rotate 搭配 translate 即可實現，最後再用 rotate 將內容轉回來
為方便示範將所有內容寫在一起，於開發環境請自行切 component 並以 computed 計算.
1
<template>
<div class="circle">
<label for="count">
輸入個數：
<input
id="count"
min="1"
type="number"
place="輸入個數"
v-model="count"
/>
</label>
<label for="deg">
輸入起始角度：
<input
id="deg"
type="number"
step="30"
place="起始位置"
v-model="startDeg"
/>
</label>
<div class="example-circle">
<div
v-for="i in count"
:key="i"
class="example-circle__item"
:style="getStyle(i - 1)"
>
{{ i }}
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const count = ref(1);
const startDeg = ref(-90);
const getStyle = (index: number) => {
const calcDeg = startDeg.value + (index / count.value) * 360;
return {
transform: `
rotate(${calcDeg}deg)
translate(10rem)
rotate(${calcDeg * -1}deg)
`,
};
};
</script>
<style lang="scss" scoped>
input {
border: 1px solid;
border-radius: 4px;
padding: 4px;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 24px;
}
.example-circle {
width: 20rem;
height: 20rem;
border: 1px solid;
border-radius: 50%;
margin: 0 auto;
position: relative;
&__item {
border: 1px solid;
width: 4rem;
height: 4rem;
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
// for text
display: flex;
justify-content: center;
align-items: center;
}
}
</style>橢圓形排版
橢圓形排版稍微複雜一點，其實就是將圓形壓扁( scaleY(0.5) )，再把元素拉回來( scaleY(2) )，這個倍率可自行調整，壓扁 N (0.5) 倍 就要把元素拉回來 1/N (1/0.5=2) 倍。
1
<template>
<div class="ellipse">
<label for="count">
輸入個數：
<input
id="count"
min="1"
type="number"
place="輸入個數"
v-model="count"
/>
</label>
<label for="deg">
輸入起始角度：
<input
id="deg"
type="number"
step="30"
place="起始位置"
v-model="startDeg"
/>
</label>
<div class="example-ellipse">
<div
v-for="i in count"
:key="i"
class="example-ellipse__item"
:style="getStyle(i - 1)"
>
{{ i }}
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const count = ref(1);
const startDeg = ref(-90);
const getStyle = (index: number) => {
const calcDeg = startDeg.value + (index / count.value) * 360;
return {
transform: `
rotate(${calcDeg}deg)
translate(10rem)
rotate(${calcDeg * -1}deg)
scaleY(2)
`,
};
};
</script>
<style lang="scss" scoped>
input {
border: 1px solid;
border-radius: 4px;
padding: 4px;
margin-bottom: 20px;
}
label {
display: block;
}
.example-ellipse {
width: 20rem;
height: 20rem;
border: 1px solid;
border-radius: 50%;
margin: 0 auto;
position: relative;
transform: scaleY(0.5);
&__item {
border: 1px solid;
width: 4rem;
height: 4rem;
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
// for text
display: flex;
justify-content: center;
align-items: center;
}
}
</style>動畫
這種排法有個好處是當你遇到一個很怪的橢圓形，你只需要對好橢圓形的形狀，靠著修改 rotate 就能確保他繞著圓上跑。
1
<template>
<div class="animation-ellipse">
<div class="animation-ellipse__item">1</div>
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scope>
.animation-ellipse {
width: 20rem;
height: 20rem;
border: 1px solid;
border-radius: 50%;
margin: 0 auto;
position: relative;
transform: scaleY(0.5) skewY(35deg);
&__item {
border: 1px solid;
width: 4rem;
height: 4rem;
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transform: skewY(-35deg) rotate(-90deg) translate(10rem) rotate(90deg)
scaleY(2);
animation: 3s round linear infinite;
// for text
display: flex;
justify-content: center;
align-items: center;
}
@keyframes round {
from {
transform: rotate(-90deg) translate(10rem) rotate(90deg) skewY(-35deg)
scaleY(2);
}
to {
transform: rotate(270deg) translate(10rem) rotate(-270deg) skewY(-35deg)
scaleY(2);
}
}
}
</style>
