变形实例

来源：互联网发布：js网页编程编辑：程序博客网时间：2024/05/19 19:14
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        div{            border: 1px solid red;            width: 158px;            height: 183px;            overflow: hidden;        }        img{            /*/!*translate/translateX/translateY:在水平、垂直或者两个方向上平移元素*!/            transform: translate(500px,100px);            /!*scale/scaleX/scaleY:在水平、垂直或者两个方向上缩放元素*!/            transform: scale(1.5);            /!*skew/skewX/skewY:倾斜一定角度*!/            transform: skew(20deg);            /!*旋转元素*!/            transform: rotate(90deg);*/            /*过渡效果：指定元素  过渡时间  过渡方式  过渡开始的延迟时间*/            transition: all 1.2s ease 0s;        }        img:hover{            /*transform: rotateY(180deg);*/            transform: scale(1.8);        }    </style></head><body><div>    <img src="../img/f3_Android1.png" alt="/"></div></body></html>
0 0