CSS基础-28CSS动画-2D、3D转换

最新推荐文章于 2022-11-24 20:44:15 发布

zhaihaohao1

最新推荐文章于 2022-11-24 20:44:15 发布

阅读量334

点赞数

分类专栏： css基础

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/47208335

版权

css基础专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!--CSS动画-2D、3D转换-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="css07.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div> 没有动画的效果</div>
    <br/>
    <div class="donghua"> 有动画的效果</div>
</body>
</html>
css:
div{
    width: 100px;
    height: 100px;
    background-color: blue;
}
/*2D转换*/
/*移动*/
/*.donghua{*/
    /*transform: translate(200px,100px);*/
    /*支持 chrome safari浏览器*/
    /*-webkit-transform: translate(200px,100px);*/
    /*支持ie浏览器*/
    /*-ms-transform: translate(200px,100px);*/
    /*支持opera浏览器*/
    /*-o-transform: translate(200px,100px);*/
    /*支持firefox浏览器*/
    /*-moz-transform: translate(200px,100px);*/

/*}*/
/*旋转*/
/*.donghua{*/
    /*transform: rotate(200deg);*/
    /*支持 chrome safari浏览器*/
    /*-webkit-transform: rotate(200deg);*/
    /*支持ie浏览器*/
    /*-ms-transform:  rotate(200deg);*/
    /*支持opera浏览器*/
    /*-o-transform: rotate(200deg);*/
    /*支持firefox浏览器*/
    /*-moz-transform:  rotate(200deg);*/

/*}*/
/*缩放*/
/*.donghua{*/
    /*margin-top: 50px;*/

    /*缩放宽度是原来的1倍，高度是原来的2倍*/
    /*transform: scale(1,2);*/
    /*支持 chrome safari浏览器*/
    /*-webkit-transform:  scale(1,2);*/
    /*支持ie浏览器*/
    /*-ms-transform:  scale(1,2);*/
    /*支持opera浏览器*/
    /*-o-transform: scale(1,2);*/
    /*支持firefox浏览器*/
    /*-moz-transform:  scale(1,2);*/

/*}*/
/*倾斜*/
/*.donghua{*/
    /*缩放宽度是原来的1倍，高度是原来的2倍*/
    /*transform: skew(20deg,2deg);*/
    /*支持 chrome safari浏览器*/
    /*-webkit-transform: skew(20deg,2deg);*/
    /*支持ie浏览器*/
    /*-ms-transform: skew(20deg,2deg);*/
    /*支持opera浏览器*/
    /*-o-transform: skew(20deg,2deg);*/
    /*支持firefox浏览器*/
    /*-moz-transform:  skew(20deg,2deg);*/


/*}*/
/*矩阵效果*/
/*————————————————————————————————*/

/*3D转换*/
.donghua{
    /*y周角度是100度*/
    transform: rotateY(100deg);
    /*支持 chrome safari浏览器*/
    -webkit-transform: rotateY(100deg);
    /*支持ie浏览器*/
    -ms-transform: rotateY(100deg);
    /*支持opera浏览器*/
    -o-transform: rotateY(100deg);
    /*支持firefox浏览器*/
    -moz-transform:   rotateY(100deg);


}

zhaihaohao1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础-28CSS动画-2D、3D转换

html>lang="en"> charset="UTF-8"> href="css07.css" type="text/css" rel="stylesheet"> 没有动画的效果 class="donghua"> 有动画的效果css:div{ width: 100px; height: 100px; b
复制链接

扫一扫

专栏目录