Rumah > Artikel > hujung hadapan web > css3动画2D、3D转换的方法
css3动画2D、3D转换的方法
- 高洛峰asal
- 2017-03-09 18:39:171659semak imbas
这篇文章介绍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>
Atas ialah kandungan terperinci css3动画2D、3D转换的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css3多列及瀑布流效果示例代码Artikel seterusnya：css实现3D立方体旋转特效的示例代码