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

Question

我正在尝试在 CSS 中创建一个看起来像铅笔的图像，我认为我做得很好，但是当我尝试使用“变换：旋转（ -45度）；”。我原以为它只会在原始图像内的某个轴上旋转，但它不仅旋转了铅笔，还以巨大的弧线将其从原始位置移动了很长一段距离，这让我觉得轴点不再是在原始图像中。（只需取消注释此处包含的 CSS 块末尾的“转换”规则，即可了解我的意思。）如果您使用正值——比如 45deg——它会完全旋转出页面，你可以没看到铅笔。

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

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

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

<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);*/
}

Answer 1

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

但是，举个例子 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> -->

Answer 2

由于 <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>

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

Can I create a shape in CSS (a pencil) without it acting weirdly when I try to rotate it?

css

css-transforms

css-shapes