JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

<div class="postidentFlag">
  <div id="togglePiFlag"><i class="fas fa-caret-right"></i></div>
  <div>text</div>
  <div></div>
</div>

CSS

.postidentFlag {
  position: fixed;
  top: 80px;
  right: 0px;
  width: 179px;
  z-index: 1;
  transform-origin: right;
  -moz-transform-origin: right;
  -webkit-transform-origin: right;
  -ms-transform-origin: right;
  transform: perspective(300px) rotateY(90deg);
  -ms-transform: perspective(300px) rotateY(90deg);
  -webkit-transform: perspective(300px) rotateY(90deg);
  -moz-transform: perspective(300px) rotateY(90deg);
  transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
}

.postidentFlag div:first-child {
  color: black;
  position: relative;
  float: left;
  width: 15px;
  height: 100%;
  line-height: 68px;
  padding-left: 6px;
  cursor: e-resize;
}

.postidentFlag div:nth-child(2) {
  width: 150px;
  height: 67px;
  position: relative;
  background-color: #ffcc00;
  float: left;
  box-shadow: 8px -10px 25px rgba(150, 150, 150, 0.4);
}

.postidentFlag div:nth-child(3) {
  position: relative;
  float: left;
  top: -0.5em;
  float: left;
  width: 8px;
  height: 68px;
  background-color: #ffcc00;
  transform: skewY(-60deg);
  -ms-transform: skewY(-60deg);
  -webkit-transform: skewY(-60deg);
  -moz-transform: skewY(-60deg);
}

JavaScript

//Flagge klappt zum Start ein
$(document).ready(function() {
  setTimeout(function() {
    $('.postidentFlag').css({
      transform: 'perspective(300px) rotateY(0deg)',
      MozTransform: 'perspective(300px) rotateY(0deg)',
      WebkitTransform: 'perspective(300px) rotateY(0deg)',
      msTransform: 'perspective(300px) rotateY(0deg)'
    });
  }, 1000);
});

//Flagge schliessen
$('#togglePiFlag').click(function() {
  $('.postidentFlag').css({
    transform: 'perspective(300px) rotateY(90deg)',
    MozTransform: 'perspective(300px) rotateY(90deg)',
    WebkitTransform: 'perspective(300px) rotateY(90deg)',
    msTransform: 'perspective(300px) rotateY(90deg)'
  });
});