標籤：ora black div str ons size cio second tran
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS——變換</title> 6 <style> 7 @font-face { 8 font-family: ‘MyFont‘; 9 font-style: normal;10 font-weight: normal;11 src: url(‘http://www.font-face.com/fonts/delicious/Delicious-Roman.otf‘);12 }13 p{14 padding: 5px;15 border: medium solid cadetblue;16 background-color: lightgray;17 margin: 2px;18 font-size: medium;19 font-family: MyFont,cursive;20 21 }22 #first{23 display: inline-block;24 width: 50px;25 font-weight: bold;26 border: medium solid black;27 background-color: green;28 color: white;29 padding: 4px;30 -webkit-transform: rotate(45deg) scaleX(1.2);31 -moz-transform: rotate(45deg) scaleX(1.2);32 -ms-transform: rotate(45deg) scaleX(1.2);33 -o-transform: rotate(45deg) scaleX(1.2);34 transform: rotate(45deg) scaleX(1.2);35 transform-origin: left bottom;36 }37 38 #second{39 display: inline-block;40 font-style: italic;41 border: medium solid black;42 background-color: orange;43 color: white;44 padding: 4px;45 width: 150px;46 }47 #second:hover{48 transition-duration: 1.5s;49 transform: rotate(360deg);50 }51 </style>52 </head>53 <body>54 <p>55 There is a paragraph.Lorem ipsum dolor sit amet, consectetur adipisicing56 elit. Ab animi laboriosam nostrum consequatur fugiat57 <span id="first">banana</span> at, labore praesentium modi,58 quasi dolorum debitis reiciendis facilis, dolor saepe sint nemo, earum59 <span id="second">apples,oranges</span> molestias quas.Lorem ipsum dolor sit amet, consectetur60 adipisicingelit. Ab animi laboriosam nostrum consequatur61 fugiatat, labore praesentium modi, quasi dolorum debitis62 reiciendis facilis, dolor saepe sint nemo, earum molestias quas.63 </p>64 </body>65 </html>
CSS——變換
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
