这篇文章介绍css3动画2d、3d转换的方法
css3动画的2D、3D转换代码:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>css3动画</title>
<style type="text/css">
p{width:100px;height:100px;background: rebeccapurple;color:#fff;}
.p1{
/*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*/
}
.p2{
/*rotate:旋转(旋转角度edg)*/
transform:rotate(100deg);
-webkit-transform:rotate(100deg);/*safari,chrome*/
}
.p3{
/*scale:缩放(宽，高)*/
transform:scale(1,2);
-webkit-transform:scale(1,2);/*safari,chrome*/
}
.p4{
/*skew:倾斜(围绕x轴旋转，围绕y轴旋转)*/
transform:skew(20deg,20deg);
-webkit-transform:skew(20deg,20deg);/*safari,chrome*/
}
.p5{
/*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转换*/
.p6{
/*rotateX:(围绕x轴旋转)*/
/*rotateY:(围绕y轴旋转)*/
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg);/*safari,chrome*/
}
</style></head><body><p>这个是测试1</p><br/><p class="p1">这个是测试2</p><br/><p class="p2">这个是测试2</p><br/><p class="p3">这个是测试2</p><br/><p class="p4">这个是测试2</p><br/><p class="p5">这个是测试2</p><br/><p class="p6">这个是测试2</p><br/></body></html>
立即学习“前端免费学习笔记（深入）”；
以上就是css3动画2D、3D转换的方法的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
569
