JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

Another area where Adobe is amping up development, according to Adobe Web Platform engineer, <a href="http://css-tricks.com/examples/ShapesOfCSS/" class="external roll-link" rel="nofollow"><span data-title="The Shapes of CSS">The Shapes of CSS</span></a>
Razvan Caliman
, is with 
CSS Shapes
, still under a chrome://flag. This is not to be confused with shapes that are simply accomplished through the application of CSS properties like border-radius or box-shadow as seen in 
The Shapes of CSS
.<a href="#" class="external roll-link" rel="nofollow"><span data-title="HTML 5">HTML 5</span></a>Such examples only provide the illusion of a shape without any bearing on the actual layout of content on the page. CSS Shapes literally enhances <a href="http://css-tricks.com/examples/ShapesOfCSS/" class="external roll-link" rel="nofollow"><span data-title="The Shapes of CSS">The Shapes of CSS</span></a> the visual storytelling experience by empowering the designer to wrap content around or within shapes with just a few simple CSS properties.

CSS

body { font-family: arial; }
a {
color: #e93a30;
font-weight: bold;
text-decoration: none;
word-wrap: break-word;
font-family: arial;
}

.roll-link {
display: inline-block;
overflow: hidden;
vertical-align: top;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}

.roll-link span {
    display: block;
    position: relative;
    padding: 0 2px;

    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;
       -ms-transition: all 400ms ease;
       transition: all 400ms ease;
    
    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
       -ms-transform-origin: 50% 0%;
       transform-origin: 50% 0%;
    
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
       -ms-transform-style: preserve-3d;
       transform-style: preserve-3d;
}

.roll-link:hover {text-decoration:none;}

.roll-link:hover span {
        background: #e93a30;
           transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}

.roll-link span:after {
    content: attr(data-title);

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 2px;

    color: #fff;
    background: #e93a30;
      transform-origin: 50% 0%;
     transform: translate3d( 0px, 105%, 0px ) rotateX( -40deg );
}