Awesome text rotation animation using CSS

CSS is Awesome. this demo covers text rotation animation using only css. Demo and download available.

Demo Download

AuthorJoan Leon
CreatedSEPTEMBER 18, 2018
LicenseOpen
Compatible browsersChrome, Firefox, Safari

HTML Snippet

<h1 class="awesome">CSS is Aw<span class="eso">eso</span><span class="me">me</span></h1>

CSS Code

@import url('https://fonts.googleapis.com/css?family=Work+Sans:600');  body {   align-items: center;   display: flex;   justify-content: center;   font-family: 'Work Sans', sans-serif;   height: 100vh;   overflow: hidden; }  .awesome {   color: #7F00FF;   font-size: 10vw; }  .eso {   animation: rotate 1s forwards ease-in-out 2s;   display: inline-block;   transform: rotateY(0); }  @supports (-webkit-background-clip: text) and (-webkit-text-fill-color: transparent) {   .eso {     background: linear-gradient(to left, #E100FF, #7F00FF);     -webkit-background-clip: text;     -webkit-text-fill-color: transparent;   } }  .me {   color: #E100FF; }  @keyframes rotate {   to { transform: rotateY(900deg); } }  @media (min-width: 40em) {   .awesome {     color: #7F00FF;     font-size: 4em;   } }

Preview

Awesome text rotation animation using CSS preview

W3TWEAKS
Latest posts by W3TWEAKS (see all)

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *