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

css3动画2D、3D转换

2017-03-10 00:00 381 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3动画</title>
<style type="text/css">
div{width:100px;height:100px;background: rebeccapurple;color:#fff;}
.div1{
/*translate:移动（x,y）*/
transform:translate（100px,100px）；
-webkit-transform: translate（100px,100px）；/*safari,chrome*/
-ms-transform: translate（100px,100px）；/*IE*/
-o-transform:translate（100px,100px）；/*opera*/
-moz-transform: translate（100px,100px）；/*firefox*/
}
.div2{
/*rotate:旋转（旋转角度edg）*/
transform:rotate（100deg）；
-webkit-transform:rotate（100deg）；/*safari,chrome*/
}
.div3{
/*scale:缩放（宽，高）*/
transform:scale（1,2）；
-webkit-transform:scale（1,2）；/*safari,chrome*/
}
.div4{
/*skew:倾斜（围绕x轴旋转，围绕y轴旋转）*/
transform:skew（20deg,20deg）；
-webkit-transform:skew（20deg,20deg）；/*safari,chrome*/
}
.div5{
/*matrix矩阵，定义 2D 转换，使用六个值的矩阵
定义 3D 转换，使用 16 个值的 4x4 矩阵*/
transform:matrix（0.586,0.8,-0.8,0.866,0,0）；
-webkit-transform: matrix（0.586,0.8,-0.8,0.866,0,0）；
}
/*3D转换*/
.div6{
/*rotateX:（围绕x轴旋转）*/
/*rotateY:（围绕y轴旋转）*/
transform:rotateX（120deg）；
-webkit-transform:rotateX（120deg）；/*safari,chrome*/
}
</style>
</head>
<body>
<div>这个是测试1</div><br/>
<div class="div1">这个是测试2</div><br/>
<div class="div2">这个是测试2</div><br/>
<div class="div3">这个是测试2</div><br/>
<div class="div4">这个是测试2</div><br/>
<div class="div5">这个是测试2</div><br/>
<div class="div6">这个是测试2</div><br/>

<a href="shijiazhuang.changtu.com/" target="_blank">石家庄汽车站时刻表</a>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航