前端CSS学习旋转缩放效果的实现（代码）

　　实现效果视频：
　　https：m。toutiaoimg。comi7012628289806139918？gdextjson7B22enterfrom223A22clickcreationcenter222C22categoryname223A22creationcenter227Denterfromclickcreationcentercategorynamecreationcentersharetokenc3b59c5cc95d43a9a8424cd30e321a34ttfromcopylinkutmsourcecopylinkutmmediumtoutiaoandroidutmcampaignclientshare
　　实现代码：！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8title旋转、缩放titlestyletypetextcss。box｛width：750height：520margin：50backgroundimage：url（狼王灵梦狼王。jpg）；position：溢出隐藏overflow：｝。boximg｛设置图片位置position：top：0；left：0；｝。img1｛zindex：100；动画animation：image12slinear1s；让动画停留在最后一帧，不回到开始处animationfillmode：｝keyframesimage1｛0｛transform：scale（1）；｝50｛缩放，缩小transform：scale（0。5）；｝100｛transform：scale（0。0001）；｝｝。img2｛zindex：98；动画animation：image22slinear3s；让动画停留在最后一帧，不回到开始处animationfillmode：｝keyframesimage2｛0｛transform：scale（1）；｝50｛缩放，缩小transform：scale（1。5）；设置不透明度opacity：1；｝100｛transform：scale（5）；opacity：0；｝｝。img3｛zindex：97；动画animation：image32slinear5s；让动画停留在最后一帧，不回到开始处animationfillmode：｝keyframesimage3｛0｛transform：rotate（0deg）；｝50｛transform：rotate（180deg）；设置不透明度opacity：1；｝100｛transform：rotate（360deg）；opacity：0；｝｝。img4｛zindex：96；动画animation：image42slinear7s；让动画停留在最后一帧，不回到开始处animationfillmode：｝keyframesimage4｛0｛transform：rotate（0deg）；｝50｛transform：rotate（180deg）；设置不透明度opacity：1；｝100｛transform：rotate（360deg）；opacity：0；｝｝。img5｛zindex：95；动画animation：image52slinear9s；让动画停留在最后一帧，不回到开始处animationfillmode：｝keyframesimage5｛0｛绕y轴旋转transform：rotateY（0deg）；｝50｛transform：rotateY（90deg）；设置不透明度opacity：1；｝100｛transform：rotateY（180deg）；opacity：0；｝｝。img6｛zindex：94；动画animation：image62slinear11s；让动画停留在最后一帧，不回到开始处animationfillmode：｝keyframesimage6｛0｛transform：rotateY（0deg）；｝50｛transform：rotateY（90deg）；设置不透明度opacity：1；｝100｛transform：rotateY（180deg）；opacity：0；｝｝。img7｛zindex：93；动画animation：image72slinear13s；让动画停留在最后一帧，不回到开始处animationfillmode：｝keyframesimage7｛0｛transform：rotateZ（0deg）；｝50｛transform：rotateZ（180deg）；设置不透明度opacity：1；｝100｛transform：rotateZ（360deg）；opacity：0；｝｝。img8｛zindex：92；动画animation：image82slinear15s；让动画停留在最后一帧，不回到开始处animationfillmode：｝keyframesimage8｛0｛transform：rotateZ（0deg）；｝50｛transform：rotateZ（180deg）；设置不透明度opacity：1；｝100｛transform：rotateZ（360deg）；opacity：0；｝｝。img9｛zindex：91；动画animation：image92slinear17s；让动画停留在最后一帧，不回到开始处animationfillmode：｝keyframesimage9｛0｛transform：rotateX（0deg）；｝50｛transform：rotateX（90deg）；设置不透明度opacity：1；｝100｛transform：rotateX（180deg）；opacity：0；｝｝。img10｛zindex：90；动画animation：image102slinear19s；让动画停留在最后一帧，不回到开始处animationfillmode：｝keyframesimage10｛0｛transform：rotateX（0deg）；｝50｛transform：rotateX（90deg）；设置不透明度opacity：1；｝100｛transform：rotateX（180deg）；opacity：0；｝｝。img11｛zindex：89；动画animation：image112slinear21s；让动画停留在最后一帧，不回到开始处animationfillmode：设置旋转原点transformorigin：｝keyframesimage11｛0｛transform：rotate（0deg）；｝50｛transform：rotate（90deg）；｝100｛transform：rotate（180deg）；｝｝。img12｛zindex：88；动画animation：image122slinear23s；让动画停留在最后一帧，不回到开始处animationfillmode：设置旋转原点transformorigin：｝keyframesimage12｛0｛transform：rotate（0deg）；｝50｛transform：rotate（90deg）；｝100｛transform：rotate（180deg）；｝｝。img13｛zindex：87；动画animation：image132slinear25s；让动画停留在最后一帧，不回到开始处animationfillmode：设置旋转原点transformorigin：｝keyframesimage13｛0｛transform：rotateX（0deg）；｝50｛transform：rotateX（45deg）；｝100｛transform：rotateX（90deg）；｝｝。img14｛zindex：86；动画animation：image142slinear27s；让动画停留在最后一帧，不回到开始处animationfillmode：设置旋转原点transformorigin：｝keyframesimage14｛0｛transform：rotateX（0deg）；设置模糊度filter：blur（0px）；｝50｛transform：rotateX（45deg）；｝100｛transform：rotateX（90deg）；filter：blur（1）；｝｝。img15｛zindex：85；动画animation：image152slinear29s；让动画停留在最后一帧，不回到开始处animationfillmode：设置旋转原点transformorigin：｝keyframesimage15｛0｛transform：rotate（0deg）；｝50｛transform：rotate（90deg）；｝100｛transform：rotate（180deg）；｝｝。img16｛zindex：84；动画animation：image162slinear31s；让动画停留在最后一帧，不回到开始处animationfillmode：设置旋转原点transformorigin：｝keyframesimage16｛0｛transform：rotate（0deg）；｝50｛transform：rotate（90deg）；｝100｛transform：rotate（180deg）；｝｝。img17｛zindex：83；动画animation：image172slinear33s；让动画停留在最后一帧，不回到开始处animationfillmode：设置旋转原点transformorigin：｝keyframesimage17｛0｛transform：rotateX（0deg）；｝50｛transform：rotateX（45deg）；｝100｛transform：rotateX（90deg）；｝｝。img18｛zindex：82；动画animation：image182slinear35s；让动画停留在最后一帧，不回到开始处animationfillmode：设置旋转原点transformorigin：｝keyframesimage18｛0｛transform：rotateX（0deg）；filter：blur（0px）；｝50｛transform：rotateX（45deg）；｝100｛transform：rotateX（90deg）；filter：blur（1px）；｝｝。img19｛zindex：81；动画animation：image192slinear37s；让动画停留在最后一帧，不回到开始处animationfillmode：设置旋转原点transformorigin：｝keyframesimage19｛0｛transform：rotate（0deg）；｝50｛transform：rotate（90deg）；｝100｛transform：rotate（180deg）；｝｝。img20｛zindex：80；动画animation：image202slinear39s；让动画停留在最后一帧，不回到开始处animationfillmode：设置旋转原点transformorigin：｝keyframesimage20｛0｛transform：rotate（0deg）；｝50｛transform：rotate（90deg）；｝100｛transform：rotate（180deg）；｝｝。img21｛zindex：79；动画animation：image212slinear41s；让动画停留在最后一帧，不回到开始处animationfillmode：设置旋转原点transformorigin：｝keyframesimage21｛0｛transform：rotateY（0deg）；｝50｛transform：rotateY（45deg）；｝100｛transform：rotateY（90deg）；｝｝。img22｛zindex：78；动画animation：image222slinear43s；让动画停留在最后一帧，不回到开始处animationfillmode：设置旋转原点transformorigin：｝keyframesimage22｛0｛transform：rotateY（0deg）；filter：blur（0px）；｝50｛transform：rotateY（45deg）；｝100｛transform：rotateY（90deg）；filter：blur（1px）；｝｝。img23｛zindex：77；动画animation：image232slinear45s；让动画停留在最后一帧，不回到开始处animationfillmode：设置旋转原点transformorigin：｝keyframesimage23｛0｛transform：rotate（0deg）；｝50｛transform：rotate（90deg）；｝100｛transform：rotate（180deg）；｝｝。img24｛zindex：76；动画animation：image242slinear47s；让动画停留在最后一帧，不回到开始处animationfillmode：设置旋转原点transformorigin：｝keyframesimage24｛0｛transform：rotate（0deg）；｝50｛transform：rotate（90deg）；｝100｛transform：rotate（180deg）；｝｝。img25｛zindex：75；动画animation：image252slinear49s；让动画停留在最后一帧，不回到开始处animationfillmode：设置旋转原点transformorigin：｝keyframesimage25｛0｛transform：rotateY（0deg）；filter：blur（0px）；｝50｛transform：rotateY（45deg）；｝100｛transform：rotateY（90deg）；filter：blur（1px）；｝｝。img26｛zindex：74；动画animation：image262slinear51s；让动画停留在最后一帧，不回到开始处animationfillmode：设置旋转原点transformorigin：｝keyframesimage26｛0｛transform：rotateY（0deg）；｝50｛transform：rotateY（45deg）；｝100｛transform：rotateY（90deg）；｝｝。img27｛zindex：73；动画animation：image272slinear53s；让动画停留在最后一帧，不回到开始处animationfillmode：设置旋转原点transformorigin：｝keyframesimage27｛0｛transform：rotate（0deg）；｝50｛transform：rotate（90deg）；｝100｛transform：rotate（180deg）；｝｝。img28｛zindex：72；动画animation：image282slinear55s；让动画停留在最后一帧，不回到开始处animationfillmode：设置旋转原点transformorigin：｝keyframesimage28｛0｛transform：rotate（0deg）；｝50｛transform：rotate（90deg）；｝100｛transform：rotate（180deg）；｝｝。img29｛zindex：71；动画animation：image292slinear57s；让动画停留在最后一帧，不回到开始处animationfillmode：｝keyframesimage29｛0｛transform：rotateZ（0deg）scale（1）；｝50｛transform：rotateZ（180deg）scale（0。5）；｝100｛transform：rotateZ（360deg）scale（0。0001）；｝｝。img30｛zindex：70；动画animation：image302slinear59s；让动画停留在最后一帧，不回到开始处animationfillmode：｝keyframesimage30｛0｛transform：rotateX（0deg）scale（1）；｝50｛transform：rotateX（180deg）scale（0。5）；｝100｛transform：rotateX（360deg）scale（0。0001）；｝｝。img31｛zindex：69；动画animation：image312slinear61s；让动画停留在最后一帧，不回到开始处animationfillmode：｝keyframesimage31｛0｛transform：rotateY（0deg）scale（1）；｝50｛transform：rotateY（180deg）scale（0。5）；｝100｛transform：rotateY（360deg）scale（0。0001）；｝｝。img32｛zindex：68；动画animation：image322slinear63s；让动画停留在最后一帧，不回到开始处animationfillmode：｝keyframesimage32｛0｛transform：scaleX（1）；｝50｛transform：scaleX（0。5）；｝100｛transform：scaleX（0。0001）；｝｝。img33｛zindex：67；动画animation：image332slinear65s；让动画停留在最后一帧，不回到开始处animationfillmode：｝keyframesimage33｛0｛transform：rotateY（0deg）scaleX（1）；｝50｛transform：rotateY（180deg）scaleX（0。5）；｝100｛transform：rotateY（360deg）scaleX（0。0001）；｝｝。img34｛zindex：66；动画animation：image342slinear67s；让动画停留在最后一帧，不回到开始处animationfillmode：｝keyframesimage34｛0｛transform：scaleY（1）；｝50｛transform：scaleY（0。5）；｝100｛transform：scaleY（0）；｝｝。img35｛zindex：65；动画animation：image352slinear69s；让动画停留在最后一帧，不回到开始处animationfillmode：｝keyframesimage35｛0｛transform：rotateY（0deg）scaleY（1）；｝50｛transform：rotateY（180deg）scaleY（0。5）；｝100｛transform：rotateY（360deg）scaleY（0）；｝｝。img36｛zindex：64；动画animation：image362slinear71s；让动画停留在最后一帧，不回到开始处animationfillmode：｝keyframesimage36｛0｛transform：rotate（0deg）scaleY（1）；｝50｛transform：rotate（180deg）scaleY（1。5）；opacity：1；｝100｛transform：rotate（360deg）scaleY（5）；opacity：0；｝｝styleheadbodyimgclassimg1srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi5e32afb633974ada。jpgaltimgclassimg2srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi611ca78146b940da。jpgaltimgclassimg3srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi6c6b6cfd7c457a2e。jpgaltimgclassimg4srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi186dd70dabd274ca。jpgaltimgclassimg5srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi2662d2333ddba97d。jpgaltimgclassimg6srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi672175a81894e155。jpgaltimgclassimg7srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfia5341fcdda90e98c。jpgaltimgclassimg8srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfia893e698ec2b7efe。jpgaltimgclassimg9srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi50ce1ef5740cb1ba。jpgaltimgclassimg10srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfie56e7b6c2057fc50。jpgaltimgclassimg11srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi2e572a369d920066。jpgaltimgclassimg12srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi04e8b41b0af03600。jpgaltimgclassimg13srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi0e7b8b8b3a0806c1。jpgaltimgclassimg14srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi0da8b6fc84cf27df。jpgaltimgclassimg15srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfiaf764d20d632e971。jpgaltimgclassimg16srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi4ee1e91847b940ac。jpgaltimgclassimg17srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi2c8a5b1a1c3ce90f。jpgaltimgclassimg18srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi6bc0ae9b8224a41c。jpgaltimgclassimg19srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfib7534fc88fd4c66b。jpgaltimgclassimg20srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi1e5e335e51ab9926。jpgaltimgclassimg21srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi4b7b64acd29d5e59。jpgaltimgclassimg22srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi7034713357a6423f。jpgaltimgclassimg23srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfif383299d72f67d19。jpgaltimgclassimg24srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi9db066e648af1022。jpgaltimgclassimg25srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi82b884f02d1db1cf。jpgaltimgclassimg26srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi27a4409be14e313c。jpgaltimgclassimg27srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfib0284b61986963a1。jpgaltimgclassimg28srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfid2642b7499917aa3。jpgaltimgclassimg29srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi8c0eab74ea69331f。jpgaltimgclassimg30srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfief582f7c0e2cca3e。jpgaltimgclassimg31srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi429b4fc4f43a55fa。jpgaltimgclassimg32srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi5bf98a0e509e3769。jpgaltimgclassimg33srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfif090df29cc7f8d19。jpgaltimgclassimg34srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi9a8d208c75a28c48。jpgaltimgclassimg35srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfiea25f502b17ac72b。jpgaltimgclassimg36srca2020imgdataimg。jpgdatasrcimg01。bs178。comajfi5ab04e4816357568。jpgaltbodyhtml
　　实现效果视频：
　　https：www。ixigua。comi7012628289806139918