您的位置：首页 > Web前端 > CSS

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

2015-08-02 16:20 736 查看

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

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航