Я сослался на код в другом месте и, следуя коду, он делает квадратную зеленую линию.
Но я думаю, что код должен делать крест, а не квадрат.
Если я запускаю код, он делает квадрат, как на картинке ниже.
Кажется, что все линии имеют разные оси вращения.
Не могли бы вы объяснить мне, почему получается не крест, а квадрат?
код:
import styled from "styled-components";
export default function App() {
const array = [0, 1, 2, 3];
return (
<Wrap>
<div className = "container">
<div className = "square">
{array.map((idx) => {
return <Line number = {idx} />;
})}
</div>
</div>
</Wrap>
);
}
const Wrap = styled.div`
margin: 0;
padding: 0;
box-sizing: border-box;
min-height: 100vh;
justify-content: center;
align-items: center;
background: #111;
.container {
border: 3px solid orange;
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container .square {
top: 200px;
left: 200px;
border: 1px solid blue;
position: absolute;
width: 200px;
height: 200px;
}
`;
const Line = styled.span`
border: 1px solid red;
position: absolute;
inset: 10px;
transform: ${(props) => `rotate(calc(90deg * ${props.number}))`};
&::before {
content: "";
position: absolute;
width: 100%;
height: 4px;
background: #0f0;
}
`;
КодПесочница https://codesandbox.io/s/zigzag-f2uybc?file=/src/App.js:0-1864
это не имеет значения, но спасибо, что сообщили мне об опечатке
Зачем делать крест? У вас буквально есть класс под названием Square? Чтобы немного проиллюстрировать, вы можете видеть, что преобразование поворота на 90 градусов гарантирует, что маленький квадрат движется под ортогональными углами. Также ключевые кадры, в которых вы должны были добавить к своему вопросу, с координатами: (2px, 2px), (178px, 2px), (178px, 178px), (2px, 178px), (2px, 2px) проходят через 4 угла квадрата.
когда-нибудь использовали transform-origin
? developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
Ваш компонент Line
представляет собой квадрат:
position: absolute;
inset: 10px;
Потому что без явной ширины и высоты поле в абсолютной позиции имеет предполагаемую ширину из свойств left
и right
и предполагаемую высоту из свойств top
и bottom
, поэтому относительно первого родителя с absolute
, relative
, fixed
или sticky
позиционирование.
-> Line
parent — это элемент <div className = "square">
.
Итак, Line
будет квадратным.
Линия барабана — это псевдоэлемент Line
перед:
position: absolute;
width: 100%;
height: 4px;
И без позиционирования (top
, bottom
, left
, right
) он начнется с верхнего левого угла первого позиционированного родителя.
-> Итак, каждый компонент Line
представляет собой прозрачный квадрат с зеленой линией сверху.
При повороте квадрата на 90° линия следует за ним, сохраняя то же положение относительно квадрата.
Если вы хотите, чтобы он образовал крест:
Вы можете центрировать элемент speudo в компоненте Line
, например, просто добавьте:
display: flex;
justify-content: center;
align-items: center;
В CSS компонента Line
.
У вас опечатка -
.contatiner
- не уверен, что это что-то сделает для вашей проблемы.