как я могу правильно преобразовать следующий css объект - PullRequest
Новая
       29

как я могу правильно преобразовать следующий css объект

0 голосов
/ 11 февраля 2020

У меня есть div объект, разработанный с css и transform; но сейчас мне действительно нужно наоборот. Я пробовал так много способов, ничего не работает.

У кого-нибудь есть полезные советы? 

<style type="text/css">
  .blau80 {
    background: #006d68;
    height: 350px;
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    transform: skew(-80deg);
    -webkit-transform: skew(-80deg);
    -ms-transform: skew(-80deg);
  }
</style>
<div class="blau80"></div>

С уважением, Майя

Как это должно выглядеть

enter image description here

Ответы [ 2 ]

0 голосов
/ 11 февраля 2020

Добавление scaleY(-1) преобразования работает. Это делает symetri c вашего div на оси X. 

    .blau80 {
        background:#006d68;
        height:350px;
        -webkit-transform-origin:100% 100%;
        -ms-transform-origin:100% 100%;
        transform-origin:100% 100%;    
        transform: skew(-80deg) scaleY(-1);
       -webkit-transform:skew(-80deg) scaleY(-1);
        -ms-transform:skew(-80deg) scaleY(-1);
    }
<div class="blau80"></div>
0 голосов
/ 11 февраля 2020

Пробовал на коде. У меня работает.

Смена ключа: transform-origin:100% 0;

<style type="text/css">
    .blau80 {
        background:#006d68;
        height:350px;
        transform-origin:100% 0;    
        transform: skew(-80deg);
       -webkit-transform:skew(-80deg);
        -ms-transform:skew(-80deg);
    }

    </style>
    <div class="blau80"></div>
...