css 3D 2D

最新推荐文章于 2024-05-30 15:11:31 发布

weixin_30533797

最新推荐文章于 2024-05-30 15:11:31 发布

阅读量55

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiezefeng/p/4504449.html

本文详细介绍了如何使用CSS实现动画效果，并展示了如何在HTML中应用3D效果，包括平移、旋转、缩放、倾斜和3D旋转等基本动画效果。通过具体的代码实例，演示了不同浏览器前缀的使用方法，以及如何调整动画的参数来实现流畅的视觉体验。

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