【html5】transform属性

来源：互联网发布：有声照片软件编辑：程序博客网时间：2024/06/08 00:23
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>transform属性</title>    <style>        body{            padding: 0;            margin: 0;        }        div{            width: 200px;            height: 200px;            background-color: pink;            margin: 100px auto;            /*过渡*/            transition: all 1s;        }        .box1:hover{            /*                scale: 缩放                scale(水平放缩比例，垂直放缩比例)；                大于1：放大                小于1：缩小                如果只写一个值等比例缩放            */            transform: scale(2,0.5);        }        .box2:hover{            /* translate:(水平位移，垂直位移)；                正值：向右向下                负值：向左向上                如果只写一个值 水平移动                百分比 ：相对于自身移动            */            transform:translate(-50%,-50%);        }        .box3:hover{            /* rotate（角度） 旋转                正值 顺时针                赋值：逆时针            */            transform: rotate(45deg)        }    </style></head><body>    <div class="box1"></div>    <div class="box2"></div>    <div class="box3"></div></body></html>
阅读全文
0 0