1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>css--Transform</title>6 <style>7 @font-face{8 font-family:' MyFont ';9 Font-style:Normal;Ten Font-weight:Normal; One src:url (' HTTP://WWW.FONT-FACE.COM/FONTS/DELICIOUS/DELICIOUS-ROMAN.OTF '); A } - P{ - padding:5px; the Border:Medium Solid Cadetblue; - Background-color:Lightgray; - margin:2px; - font-size:Medium; + font-family:myfont,cursive; - + } A #first{ at Display:Inline-block; - width:50px; - Font-weight:Bold; - Border:Medium solid black; - Background-color:Green; - Color: White; in padding:4px; - -webkit-transform:Rotate (45deg) ScaleX (1.2); to -moz-transform:Rotate (45deg) ScaleX (1.2); + -ms-transform:Rotate (45deg) ScaleX (1.2); - -o-transform:Rotate (45deg) ScaleX (1.2); the Transform:Rotate (45deg) ScaleX (1.2); * Transform-origin:Left Bottom; $ }Panax Notoginseng - #second{ the Display:Inline-block; + Font-style:Italic; A Border:Medium solid black; the Background-color:Orange; + Color: White; - padding:4px; $ width:150px; $ } - #second: Hover{ - transition-duration:1.5s; the Transform:Rotate (360deg); - }Wuyi </style> the </Head> - <Body> Wu <P> - there is a paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing About elit. Ab Animi Laboriosam Nostrum consequatur fugiat $ <spanID= "First">Banana</span>At , Labore Praesentium Modi, - quasi dolorum debitis reiciendis facilis, Dolor saepe Sint Nemo, Earum - <spanID= "Second">Apples,oranges</span>Molestias Quas. Lorem ipsum dolor sit amet, Consectetur - Adipisicingelit. Ab Animi Laboriosam Nostrum Consequatur A Fugiatat, Labore praesentium Modi, quasi dolorum debitis + Reiciendis Facilis, Dolor saepe Sint Nemo, Earum Molestias quas. the </P> - </Body> $ </HTML>
css--Transform