(CSS)- 如何使用 CSS 讓圖片 2D 旋轉
(CSS)- 如何使用 CSS 讓圖片 2D 旋轉
如果不知如何在 HTML 語法中，讓圖片 2D 旋轉，可看此篇文章。
使用 CSS 程式碼：( 親測可行，可當範本用 )
<strong><span style=”font-size:12px;”><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”><html> <head> <title>MyHtml.html</title> <meta http-equiv=”keywords” content=”keyword1,keyword2,keyword3″> <meta http-equiv=”description” content=”this is my page”> <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″> <style> *{margin:0px 0px;padding:0px 0px;} .page{width: 1040px; height: 330px; background:rgba(212, 99, 38, 1); box-shadow: 1px 1px 10px rgba(153, 129, 26, 1); margin: 55px auto; border-radius: 8px; border: 1px solid rgba(20, 107, 131, 1);} .page dl{width:200px;text-align:center; margin:60px 30px 20px 15px; display:inline-block;/*改變塊元素為行內元素不影響寬度 高度 讓他們並排*/ } .page dl .title{font-zixe:35px;line-height:45px; color:#535353;font-family:”微軟雅黑”} .page dl dd{font-size:14px;line-height:20px;color:#a0a0a0; font-weight:600;} .page dl:hover img{ animation:mying 800ms linear; } @keyframes mying{ form{transform:roteY(0deg);} to{transform:rotateY(360deg);} } @keyframes mying2{ form{transform:roteX(0deg);} to{transform:rotateX(360deg);} } @keyframes mying3{ form{transform:roteZ(0deg);} to{transform:rotateZ(360deg);} } </style> </head> <body> <div class=”page”> <dl> <dt> <img src=”img/icon1.png”/> </dt> <dd class=”title”>名師親授</dd> <dd>多年教學經驗沉澱</dd> <dd>精講考試技巧與策略</dd> </dl> <dl> <dt> <!–插入圖片 src路徑–> <img src=”img/icon2.png”/> </dt> <!–自定義列表 表頭–> <dd class=”title”>專案實戰</dd><!– 表內容–> <dd>實時互動體驗全新課堂</dd><!– 表內容–> <dd>拉近線上師生溝通距離</dd><!–表內容–> </dl> <dl> <dt> <!–插入圖片 src路徑–> <img src=”img/icon4.png”/> </dt> <!–自定義列表 表頭–> <dd class=”title”> 作業批改</dd><!– 表內容–> <dd> 傾心批改作業</dd><!– 表內容–> <dd> 快速反饋結果</dd><!–表內容–> </dl> <dl> <dt> <!–插入圖片 src路徑–> <img src=”img/icon3.png”/> </dt> <!–自定義列表 表頭–> <dd class=”title”> 推薦工作</dd><!– 表內容–> <dd> 全職就業保障</dd><!– 表內容–> <dd>就業專業指導服務</dd><!–表內容–> </dl> </div> </body></html>
免責聲明：
1.本影像檔案皆從網上搜集轉載，不承擔任何技術及版權問題。
2.如有下載連結僅供寬頻測試研究用途，請下載後在24小時內刪除，請勿用於商業。
3.若侵犯了您的合法權益，請來信通知我們，我們會及時刪除，給您帶來的不便，深表歉意。