缩放倾斜效果

xiaoxiao2021-02-28  44

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>2D变换中的旋转和平移效果</title> <style> #mydiv{ width: 200px; height: 200px; background-color: red; margin:200px; } #mydiv:hover{ transition: all 4s; /*平移效果*/ /*transform: translateY(-150PX); -webkit-transform: translateY(-150px);*/ /*旋转效果*/ transform: rotate(40deg); -webkit-transform: rotate(40deg); /*调整旋转中心*/ transform-origin: 50%,50%; -webkit-transform-origin:50% 50% ; } </style> </head> <body> <div id="mydiv"></div> </body> </html>
转载请注明原文地址: https://www.6miu.com/read-2613293.html

最新回复(0)