我必须模拟一个“风吹在盘子上”,研究了一点我发现旋转属性,但当我应用它是旋转整个图像,如下图所示。
然而,我期望得到像下面的图像一样的东西,但更平滑。
要使用哪个属性以便将地板(板被卡住的部分)保留在固定图像中?
trnvg8h31#
使用变换-原点:底部中心。
<!DOCTYPE html> <html> <head> <style> #myDIV { margin: auto; border: 1px solid black; width: 200px; height: 100px; background-color: coral; color: white; animation: mymove 5s infinite; transform-origin: bottom center } @keyframes mymove { 0% { transform: rotate(-20deg); } 50% { transform: rotate(20deg); } 100% { transform: rotate(-20deg); } } </style> </head> <body> <h1>Animation of transform</h1> <p>Gradually rotate the element around the bottom center:<p> <div id="myDIV"> <h1>myDIV</h1> </div> </body> </html>
在此处找到:https://stackoverflow.com/a/6633676/13867483
1条答案
按热度按时间trnvg8h31#
使用变换-原点:底部中心。
在此处找到:https://stackoverflow.com/a/6633676/13867483