ҡѽҡ֮CSSʵÏÖ·½Ê½
<style>.mum p { margin: 10px 0; }
.mum pre { padding: 12px; background: #eee; color: blue; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; tab-size: 4; white-space: pre-wrap; word-wrap: break-word; }
.Mid { text-align: center; }
.tGreen { color: green; }
.mypic { transform-origin:center bottom; animation: yao 2s linear infinite alternate; }
@keyframes yao {
from { transform: skew(-3deg); }
to { transform: skew(3deg); }
}
</style>
<div class="mum">
<p>¿´ÕâÕž²Ì¬Í¼Æ¬£º</p>
<p class="Mid"><img src="https://638183.freep.cn/638183/small/h2.png" alt=""></p>
<p>ÎÒÃǼÙÉèÓз磬À±Ã´£¬Ëü»áËæ·çÒ¡»Î¡£Õâ¸öÓà CSS ¾Í¿ÉÒÔÍê³É¡£Ê×ÏÈ£¬ÐèÒª¶¨ÒåÒ¡»ÎµÄÖ§µã£¬Ò»°ã¶¼Êǵײ¿£¬Í¼Æ¬ÄØÔòÐèÒªÒ»¸ö class Ñ¡ÔñÆ÷£¬ÔÚÕâÀﶨÒå transform-origin£¬¼´Ô˶¯µÄԵ㣬¾ÍÊÇËùνµÄÖ§µã£º</p>
<pre>.mypic {
transform-origin:center bottom;
<span class="tGreen"> /* »òÕß : transform-origin: 50% 100%; ¼´£¬x·½Ïò 50%£¬y ·½Ïò 100% */</span>
}
</pre>
<p>È»ºóÓà transform µÄ skew »ò rotate À´Ò¡Ò·»¨Ö¦£¬µ±È»ÒªÍ¨¹ý¹Ø¼üÖ¡¶¯»£º£º</p>
<pre>@keyframes yao {
from { transform: skew(-3deg); }
to { transform: skew(3deg); }
<span class="tGreen">/* »òÕß
from { transform: rotate(-3deg); }
to { transform: rotate(3deg); }
*/</span>
}
</pre>
<p>²¢ÔÚ .mypic Ñ¡ÔñÆ÷´úÂëÖмÓÈë animation ÊôÐÔ£º</p>
<pre>.mypic {
transform-origin:center bottom;
animation: yao 2s linear infinite alternate;
}
</pre>
<p class="Mid"><img class="mypic" src="https://638183.freep.cn/638183/small/h2.png" alt="">
</p><p>Õâ¾Í³ÉÁË¡£ÖÁÓÚÓà skew »¹ÊÇ rotate£¬¶þÕßÊÇ¿ÉÒÔÕå×õģºskewÓÐЩ΢Ðα䣬rotate ´¿Ò¡Ò·¡£</p>
<p></p></div> ÎÒÊǾõµÃskew¸üºÃ¿´ÄØ{:4_187:} ¼ÇµÃÄ㻹ÓÃÈÃÁ½ÕŲ¢ÅŵÄÃÀÈËͼ·ÅÔÚ±³¾°Àͨ¹ýskewŪµÃÃÀÈËÏñ»î¹ýÀ´Ò»Ñù{:4_173:} ºìÓ° ·¢±íÓÚ 2024-1-29 20:07
ÎÒÊǾõµÃskew¸üºÃ¿´ÄØ
Õâ¸öÕâ¸öÕâ¸ö£¬Ò»Á½¾ä˵²»Çå ÄǸöÌû×Ó½ÐʲôÃûÎÒÍü¼ÇÁË£¬Èç¹ûÈ¥·Ó¦¸ÃÄÜ·³öÀ´¡£ ºìÓ° ·¢±íÓÚ 2024-1-29 20:09
¼ÇµÃÄ㻹ÓÃÈÃÁ½ÕŲ¢ÅŵÄÃÀÈËͼ·ÅÔÚ±³¾°Àͨ¹ýskewŪµÃÃÀÈËÏñ»î¹ýÀ´Ò»Ñù
¶î£¬ÓеÄ
ºìÓ° ·¢±íÓÚ 2024-1-29 20:10
ÄǸöÌû×Ó½ÐʲôÃûÎÒÍü¼ÇÁË£¬Èç¹ûÈ¥·Ó¦¸ÃÄÜ·³öÀ´¡£
ÉñÃعØϵ ÂíºÚºÚ ·¢±íÓÚ 2024-1-29 20:11
¶î£¬ÓеÄ
µ±Ê±¾Í¾õµÃÕâ¸ö¹¦ÄÜÌرðÃÀÄØ¡£ ÂíºÚºÚ ·¢±íÓÚ 2024-1-29 20:14
ÉñÃعØϵ
»¹ÊǺںڼÇÐÔºÃ{:4_199:} ºìÓ° ·¢±íÓÚ 2024-1-29 22:26
»¹ÊǺںڼÇÐÔºÃ
×Ô¼º×öµÄ£¬ÓеãÓ¡Ïó ºìÓ° ·¢±íÓÚ 2024-1-29 22:26
µ±Ê±¾Í¾õµÃÕâ¸ö¹¦ÄÜÌرðÃÀÄØ¡£
ÄãÒ²ÓùýµÄ ÂíºÚºÚ ·¢±íÓÚ 2024-1-29 22:34
×Ô¼º×öµÄ£¬ÓеãÓ¡Ïó
ÎÒ°´Ãû×ÖËѵ½ÁË£¬ÄǸöÊÇÒƶ¯¼ÓÇãб£¬ºÜÃÀ{:4_187:} ÂíºÚºÚ ·¢±íÓÚ 2024-1-29 22:34
ÄãÒ²ÓùýµÄ
Êǵģ¬ÎÒ¸ú×Åѧ¹ýµÄ{:4_173:} ºìÓ° ·¢±íÓÚ 2024-1-30 16:49
Êǵģ¬ÎÒ¸ú×Åѧ¹ýµÄ
һѧ¾Í»á ºìÓ° ·¢±íÓÚ 2024-1-30 16:47
ÎÒ°´Ãû×ÖËѵ½ÁË£¬ÄǸöÊÇÒƶ¯¼ÓÇãб£¬ºÜÃÀ
¹ýµÃÈ¥£¬²»ËãÌ«²î ÂíºÚºÚ ·¢±íÓÚ 2024-1-30 17:50
һѧ¾Í»á
Ò»×ö³öÀ´¾ÍºÃ¿´ÄØ{:4_187:} ÂíºÚºÚ ·¢±íÓÚ 2024-1-30 17:50
¹ýµÃÈ¥£¬²»ËãÌ«²î
¶øÇÒºÜÌر𣬵×É«Ò²ÓõÄͼƬÀïµÄÑÕÉ«{:4_173:} ºìÓ° ·¢±íÓÚ 2024-1-30 21:49
¶øÇÒºÜÌر𣬵×É«Ò²ÓõÄͼƬÀïµÄÑÕÉ«
ͦºÃͦºÃ ÂíºÚºÚ ·¢±íÓÚ 2024-2-5 18:52
ͦºÃͦºÃ
·¢ÏÖÕâ¸öÓÃÓÚÈËÎïµÄÒ²ºÃ¿´¡£ ºìÓ° ·¢±íÓÚ 2024-2-5 22:06
·¢ÏÖÕâ¸öÓÃÓÚÈËÎïµÄÒ²ºÃ¿´¡£
½Ç¶ÈºÏÊʾͺÃ
Ò³:
[1]
2