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

最新推荐文章于 2024-05-05 06:15:19 发布

绿叶清风

最新推荐文章于 2024-05-05 06:15:19 发布

阅读量1k

点赞数

分类专栏： html/css

本文链接：https://blog.csdn.net/PZ0605/article/details/45770989

版权

html/css 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!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

收藏

觉得还不错? 一键收藏
0
评论
html css学习笔记-2d 3d动画的转换

div{ width: 100px; height: 100px; background-color: green; } /*移动效果*/ /*.div2{*/ /*x,y移动100*/ /*transform:translate(
复制链接

扫一扫

专栏目录