JSFiddle - React, Tailwind, and code Playground

by Florence Maurice

HTML

<div id="eins">

Ein mit transform gedrehter Text - unschön im Firefox<br>
Noch ein bisschen mehr Text ...
</div>
<div id="zwei">
Ein mit transform gedrehter Text - schön im Firefox<br>
Noch ein bisschen mehr Text ...
</div>

CSS

body { 
   font-family: sans-serif;
   background-color:#F1F4F9;
   padding: 30px;
}

div {
  border-radius: 5px;
  font-size: 1.7em;
  color: #375466;
  margin: 20px;
  padding: 20px;
  width: 250px;
  border: 5px solid #E5EEF3;
  -webkit-box-shadow: rgba(2, 42, 56, 0.7) 0px 0px 10px -3px;
  box-shadow: rgba(2, 42, 56, 0.7) 0px 0px 10px -3px;
  margin-top: 80px;
}


/* Transformationen */
#eins {
	-webkit-transform: rotate(20deg);
	-ms-transform:  rotate(20deg);
	transform:  rotate(20deg);
}
#zwei {
	-webkit-transform: perspective(1px) rotate(20deg) ;
	-ms-transform:  rotate(20deg);
	transform:  perspective(1px) rotate(20deg);
    margin-top: 20px;
}