transform属性

来源：互联网发布：游戏中常用的算法编辑：程序博客网时间：2024/05/27 00:48
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>transform属性</title>    <style>        img{        /*<!--transform  translate/translateX/translateY :在水平 垂直 或者两个方向上评议元素-->*/        /*<!--scale/scaleX/scaleY:  缩放-->*/            /*rotate：旋转*/            /*skew:倾斜*/            /*transform-origion:指定变形的起点  top bottum left right lefttop.....*/            /*transform: translate(500px,100px);*/            /*transform: scale(1.5);*/            /*transform: skew(20deg);*/            /*transform: rotate(90deg);*/        }        /*通过transition属性 完成过渡效果（不要跟transform放到一起）           transition-property：制定过渡使用的css属性                     -duration：指定完成过渡的时间                     -timing-function:指定过渡时间函数                     -delay：指定过度开始出现的延迟时间*/        img{            transition: all 1.2s ease;        }        img:hover{            transform: scale(1.8);        }        div{            border: 1px solid black;            width: 158px;            height: 183px;            overflow: hidden;        }    </style></head><body><div>    <img src="../../img/f1.png" alt=""/></div></body></html>
1 0