CSS半圓中心旋轉可以實現一些非常炫酷的效果,比如旋轉餅狀圖。下面我們來簡單介紹一下這種效果的實現方法。
.circle {
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
background: red;
transform-origin: 50% 100%;
transform: rotate(45deg);
}
在上面的代碼中,我們首先定義了一個.circle類,然后設置了它的圓角和背景顏色。接下來,我們使用transform-origin屬性設置變換的基點為X軸的中心和Y軸的底部,這樣就可以實現圓心旋轉的效果。最后,我們使用transform屬性旋轉半圓,這里的角度可以自己調整。
如果想要實現更加復雜的效果,可以在半圓中添加其他元素或偽元素,并進行進一步的調整。