HTML,CSS做一个圆形，等分成12份，做一个转盘

叫我福建

于 2021-11-06 16:02:00 发布

阅读量2.5k

点赞数 1

分类专栏：网站操作 html 文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_38192709/article/details/121180215

版权

问题描述：想制做一个圆形，等分成 12 份，说白了就是想转盘。

关于 rotate, rotateX, rotateY, skew, skewX, skewY, transform-origin 的知识可以看一下菜鸟官网，看了网上好多版本的理解，能理解的才是适合自己的。
https://c.runoob.com/codedemo/3391

问题思路：
1：先把一个DIV 做成一个圆形(这个定位是 relative , absolute 都可以)；
在这里插入图片描述

2：再 DIV 下面写一个 DIV ，绝对定位到中间，就出现了下面这样的状态；
在这里插入图片描述

3：再把第一个 DIV 的 over-flow: none，就得到如下状态：

在这里插入图片描述
4：剩下就就是 rotate 的事情了，如果是 4 等份，就不需要 skew ,transform-origin ，所以下面就直接上代码， 1/ 4 的效果如下：剩下的CSS 自己补一下就完成了

在这里插入图片描述

问题解决：

<!DOCTYPE html>
<html>
<head>
<style>

.constellation {
     
    margin: 0 auto;
    position: relative;
    width: 40rem;
    height: 40rem;
    border-radius: 50%;
    background-color: orange;
    overfl

最低0.47元/天解锁文章

叫我福建

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
HTML,CSS做一个圆形，等分成12份，做一个转盘

问题描述：想制做一个圆形，等分成 12 份，说白了就是想转盘。关于 rotate, rotateX, rotateY, skew, skewX, skewY, transform-origin 的知识可以看一下菜鸟官网，看了网上好多版本的理解，能理解的才是适合自己的。https://c.runoob.com/codedemo/3391问题思路：1：先把一个DIV 做成一个圆形(这个定位是 relative , absolute 都可以)；2：再 DIV 下面写一个 DIV ，绝对定位到中
复制链接

扫一扫

专栏目录