我可以在 CSS铅笔中创建一个形状而不会在我尝试旋转它时表现得很奇怪吗？

如何解决我可以在 CSS铅笔中创建一个形状而不会在我尝试旋转它时表现得很奇怪吗？

我正在尝试在 CSS 中创建一个看起来像铅笔的图像，我认为我已经完成了，但是当我尝试使用“transform:rotate(-45deg);”旋转它时，它的行为很奇怪。我以为它只会在原始图像内某处的轴上旋转，但它不仅会旋转铅笔，还会将其从原始位置移动很长一段距离，形成一个巨大的弧线，这让我觉得轴点不再原图里面。 （只需取消对此处包含的 CSS 块末尾的“转换”规则的注释即可了解我的意思。）如果您使用正值 - 例如 45deg - 它会完全旋转离开页面并且您看不到铅笔.

我还尝试使用 ::before 和 ::after 伪元素创建铅笔的各个部分，但随后它旋转了主要元素，但将伪元素留在了后面。

你可以在 enter code herehttps://codepen.io/HorrieGrump/pen/GRmvJbV

这是我第一次发帖，所以如果我违反了任何规则，请原谅我（并礼貌地谴责）。谢谢

<section class="pencil">
  <div class="cap"></div>
  <div class="tube"></div>
  <div class="space"></div>
  <div class="triangle"></div>
</section>



body {
  background: antiquewhite;
}

/**********************   FirsT PENCIL         *********************/

/* This is the ROUNDED SEMICIRCLE on top of the body of the pencil*/

.cap {
  height: 20px;
  width: 40px;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  background-color: gray;
}

/* This is the BODY of the pencil*/

.tube {
  height: 100px;
  width: 40px;
  background-color: gray;
  margin-top: -1px;
}

/* This is the "empty" SPACE between body of the pencil and the tip of the pencil*/
.space {
  height: 20px;
  width: 40px;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  background-color: antiquewhite;
  margin-top: -8px;
}


/* This is the TIP of the pencil*/
.triangle {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 40px solid gray;
  border-radius: 50%;
  margin-left: -6px;
}

/* This is a container to group all the parts of the pencil*/
section.pencil {
  margin-top: 8rem;
  margin-bottom: 17rem;
/*  transform: rotate(-45deg);*/
}

解决方法

尝试查看您的部分元素 - 它可以很好地将铅笔的各个部分组合在一起，但是给它一个背景颜色，您会看到如下内容：

但是，以 display: inline-block 为例，它将具有您期望的宽度（即由铅笔定义）。现在，当您旋转它时，它会按照您的预期执行（变换原点默认为中心）。

body {
  background: antiquewhite;
}

/**********************   FIRST PENCIL         *********************/

/* This is the ROUNDED SEMICIRCLE on top of the body of the pencil*/

.cap {
  height: 20px;
  width: 40px;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  background-color: gray;
}

/* This is the BODY of the pencil*/

.tube {
  height: 100px;
  width: 40px;
  background-color: gray;
  margin-top: -1px;
}

/* This is the "empty" SPACE between body of the pencil and the tip of the pencil*/
.space {
  height: 20px;
  width: 40px;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  background-color: antiquewhite;
  margin-top: -8px;
}


/* This is the TIP of the pencil*/
.triangle {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 40px solid gray;
  border-radius: 50%;
  margin-left: -6px;
}

/* This is a container to group all the parts of the pencil*/
section.pencil {
  background-color: pink;
  margin-top: 8rem;
  margin-bottom: 17rem;
  display: inline-block;
  transform: rotate(-45deg);
}

<section class="pencil">
  <div class="cap"></div>
  <div class="tube"></div>
  <div class="space"></div>
  <div class="triangle"></div>
</section>

<!-- <section class="pencil-2">
  <div class="cap-2"></div>
  <div class="tube-2"></div>
  <div class="space-2"></div>
  <div class="triangle-2"></div>
</section> -->

,

由于 <section> 默认是块元素，它会拉伸到父元素的全部可用宽度（参见示例中的黄色背景）。

要使容器适合内容，您需要：使其内联块（属性 display: inline-block）或添加属性 width: min-content。

我认为您还希望笔不是围绕中心旋转，而是围绕其尖端旋转。只需添加 transform-origin: center bottom。

body { background: antiquewhite; }

/**********************   FIRST PENCIL         *********************/

/* This is the ROUNDED SEMICIRCLE on top of the body of the pencil*/
.cap {
  height: 20px;
  width: 40px;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  background-color: gray;
}

/* This is the BODY of the pencil*/
.tube {
  height: 100px;
  width: 40px;
  background-color: gray;
  margin-top: -1px;
}

/* This is the "empty" SPACE between body of the pencil and the tip of the pencil*/
.space {
  height: 20px;
  width: 40px;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  background-color: antiquewhite;
  margin-top: -8px;
}

/* This is the TIP of the pencil*/
.triangle {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 40px solid gray;
  border-radius: 50%;
  margin-left: -6px;
}

/* This is a container to group all the parts of the pencil*/
section.pencil {
  margin-top: 8rem;
  margin-bottom: 17rem;
  
  background-color: #fa08;
  transition: 1s ease;
}
section.pencil:hover { transform: rotate(45deg); }

/* Only for example */ input,label{position:fixed}label:nth-of-type(1){top:10px;left:10px}label:nth-of-type(2){top:10px;left:200px}label:nth-of-type(3){top:30px;left:35px}label:nth-of-type(4){top:30px;left:225px}input:nth-of-type(1){top:10px;left:160px}input:nth-of-type(2){top:10px;left:280px}input:nth-of-type(3){top:30px;left:10px}input:nth-of-type(4){top:30px;left:200px}#d-ib:checked~section.pencil{display:inline-block}#w-mc:checked~section.pencil{width:min-content}#to:checked~section.pencil{transform-origin:50% 100%}

<label for="d-b">display: block (default)</label><input type="radio" name="display" id="d-b" checked><label for="d-ib">inline-block</label><input type="radio" name="display" id="d-ib"><input type="checkbox" id="w-mc"><label for="w-mc">width: min-content</label><input type="checkbox" id="to"><label for="to">transform-origin: 50% 100% (default = 50% 50%)</label>

<section class="pencil">
  <div class="cap"></div>
  <div class="tube"></div>
  <div class="space"></div>
  <div class="triangle"></div>
</section>