css 3D 2D

<!--
transition 设置四个过渡属性
transition－property 过渡的名称
transition－duration 过渡效果花费的时间
transition－timing－function 过渡效果的时间曲线
transition－delay 过渡效果开始时间
-->
<div>效果涨势</div>

 

 

div{

width: 100px;
height: 100px;
background-color: red;
}
.div22{

transform: translate(100px.100px);
/* safari chrome*/
-webkit-transform: translate(200px,200px);
/* IE*/
-ms-transform: translate(200px,100px);
/* opera*/
-o-transform: translate(200px,100px);
/* firefox*/
-moz-transform: translate(200px,100px);

}
.div22{


/* 旋转100度*/
transform: rotate(100deg);
/* safari chrome*/
-webkit-transform: rotate(100deg);
/* IE*/
-ms-transform: rotate(100deg);
/* opera*/
-o-transform: rotate(100deg);
/* firefox*/
-moz-transform: rotate(100deg);
}

.div22{
/* 倍数 宽度倍数 高度倍速*/
transform: scale(1,2);
-webkit-transform: scale(1,2);
-ms-transform: scale(1,2);
-o-transform: scale(1,2);
-moz-transform: scale(1,2);
}
.div22{
/* 旋转x轴 y轴*/
transform: skew(50deg,50deg);
-webkit-transform: skew(50deg,50deg);
-ms-transform: rotate(50deg,50deg);
-o-transform: rotate(50deg,50deg);
-moz-transform: skew(50deg,50deg);
}
.div2{

/* 3D 效果*/
transform:rotateY(120deg);
-webkit-transform: rotateY(120deg);

}

 

<!DOCTYPE>
<html>
<head lang=en>
<meta charset="utf-8">
<link href="3D.css" type="text/css" rel="stylesheet">


</head>
<div>这是一个初始化效果</div>
<br/>

<div class="div2">改变后的效果</div>

</html>

 

 

 

 

 

 

 

 

 



posted @ 2015-05-14 21:10  谢小锋  阅读(187)  评论(0)    收藏  举报