HTML5中CSS3的Transform属性

来源：互联网发布：战国红异端网络编辑：程序博客网时间：2024/06/07 00:59

transform：属性值为变形函数
1.translate/translateX/translateY:在水平、垂直或两个方向上平移元素
2.Scale/ScaleX/ScaleY:在水平、垂直或两个方向上缩放元素
3.Rotate：旋转元素，单位deg
4.Skew/SkewX/SkewY:使元素倾斜一定的角度
Transform-orgin:指定变形的起点-lefttop

方位词：top/bottom/center/left/right

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        div{            border: 1px solid red;            width: 170px;            height: 195px;            overflow: hidden;            text-align: center;        }       /* img{            !*1.从左上角为起点移动*!            !*transform: translate(500px,100px);*!            !*2.使元素倾斜一定的角度*!            !*transform: skew(20deg);*!            !*3.在水平、垂直或两个方向上缩放元素*!            transform: scale(1.5);        }*/       img{           /*transition:all 时间 缓动*/           transition: all 1.2s ease;       }        img:hover{            transform: scale(1.5);            /*transform: rotateY(180deg);*/        }    </style>    <title>Transform</title></head><body><div>    <img src="../../img/f3_Android1.png" alt=""></div></body></html>

0 0