html css学习笔记-2d 3d动画的转换

来源：互联网发布：淘宝网红店铺排行榜编辑：程序博客网时间：2024/05/17 23:58
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <style type="text/css">        div{            width: 100px;            height: 100px;            background-color: green;        }        /*移动效果*/        /*.div2{*/            /*x,y移动100*/            /*transform:translate(100px,100px);*/            /*浏览器支持,safrai chrome*/            /*-webkit-transform:translate(100px,200px);*/            /*支持ie 360*/            /*-ms-transform:translate(100px,200px);*/            /*支持opera*/            /*-o-transform:translate(100px,200px);*/            /*支持mozilla  firefox*/            /*-moz-transform:translate(100px,200px);*/        /*}*/        /*旋转100*/        /*.div2{*/            /*transform:rotate(100deg);*/            /*浏览器支持,safrai chrome*/            /*-webkit-transform:rotate(100deg);*/            /*支持ie 360*/            /*-ms-transform:rotate(100deg);*/            /*支持opera*/            /*-o-transform:rotate(100deg);*/            /*支持mozilla  firefox*/            /*-moz-transform:rotate(100deg);*/        /*}*/        /*缩放 宽度不变，高度变为原来的2倍*/        /*.div2{*/            /*margin-top: 100px;;*/            /*transform:scale(1,2);*/            /*浏览器支持,safrai chrome*/            /*-webkit-transform:scale(1,2);*/            /*支持ie 360*/            /*-ms-transform:scale(1,2);*/            /*支持opera*/            /*-o-transform:scale(1,2);*/            /*支持mozilla  firefox*/            /*-moz-transform:scale(1,2);*/        /*}*/         /*顷斜 x,y各50度*/        .div2{            margin-top: 100px;;            transform:skew(50deg,50deg);            /*浏览器支持,safrai chrome*/            -webkit-transform:skew(50deg,50deg);            /*支持ie 360*/            -ms-transform:skew(50deg,50deg);            /*支持opera*/            -o-transform:skew(50deg,50deg);            /*支持mozilla  firefox*/            -moz-transform:skew(50deg,50deg);        }        .div3{            transform:rotatX(20deg);            /*浏览器支持,safrai chrome*/            -webkit-transform:rotatX(20deg);            /*支持ie 360*/            -ms-transform:rotatX(20deg);            /*支持opera*/            -o-transform:rotatX(20deg);            /*支持mozilla  firefox*/            -moz-transform:rotatX(20deg);        }    </style>    <title></title></head><body><!--2D 3D转换：通过css3转换，我们能够对元素进行移动，缩放，转动，拉长或拉伸  转换是使用元素改变形状，尺寸和位置的一种效果2D转换方法：  translate();  rotate  scale  skew:倾斜  matrix 3D转换方法：   rotateX   rotateY--> <div>这是一个初始div</div><br/><div class="div2">这是改变后的效果</div> <div class="div3">     这是改变后的效果div3 </div></body></html>
0 0