CSS Transform - Rotate & Skew не работает вместе - PullRequest
Новая
       11

CSS Transform - Rotate & Skew не работает вместе

0 голосов
/ 31 августа 2018

У меня есть вопрос, с которым, надеюсь, кто-то сможет помочь. Поэтому я пытаюсь создать форму ромба div, которая сама по себе будет ссылкой:

Diamonds in wanted structure

Создание этих отдельных элементов div, например, и изображения для ромба со ссылкой вокруг него не будет работать в этой ситуации из-за переполнения других блоков.

Итак, сначала я создал div и использовал transform в CSS, чтобы получить желаемый эффект:

enter image description here

Однако при попытке создать это получим следующее: 

.test {
	width: 192px;
	height: 144px;
	transform: skewX(-40deg) rotate(25deg);
	display: block;
	background-color: red;
	top:50px;
	left:50px;
	position:absolute;
}
<div class="test"></div>

Запустив это, вы увидите, что в атрибуте transform и вращение, и перекос не могут работать вместе, так как кажется, что перекос зависит от вращения.

Кто-нибудь еще сталкивался с подобными вещами, когда пытался создавать подобные формы? Есть ли другой способ (CSS или Javascript), где я мог бы получить желаемый эффект?

Любая помощь будет принята с благодарностью. Если кому-то нужна дополнительная информация, пожалуйста, дайте мне знать.

Большое спасибо:)

Ответы [ 2 ]

0 голосов
/ 31 августа 2018

Как я объяснил в другом ответе ( Имитация источника преобразования с использованием translate ). Умножение выполняется от слева направо , но визуальный эффект от справа налево : 

.test {
	width: 192px;
	height: 144px;
	transform:rotate(25deg)  skewX(-40deg) ;
	display: block;
	background-color: red;
	top:50px;
	left:50px;
	position:absolute;
}
<div class="test"></div>

Кстати, вот несколько альтернатив для достижения аналогичной формы без преобразования.

С градиентом: 

.box {
  width:200px;
  height:100px;
  background:
    linear-gradient(to top right, red 49%,transparent 50%) top right,
    linear-gradient(to top left, red 49%,transparent 50%) top left,
    linear-gradient(to bottom right, red 49%,transparent 50%) bottom right,
    linear-gradient(to bottom left, red 49%,transparent 50%) bottom left;
  background-size:50% 50%;
  background-repeat:no-repeat;
}
<div class="box">
</div>

С clip-path: 

.box {
  width: 200px;
  height: 100px;
  background: red;
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
<div class="box">
</div>

С SVG: 

<svg viewBox="0 0 200 100" width='200'>
<polygon points="0 50,100 0,200 50,100 100" fill=red />
</svg>
0 голосов
/ 31 августа 2018

Вам нужно объявить поворот перед перекосом.

Преобразование очень специфично, в каком порядке выполняются его преобразования.

...