Home > Article > Web Front-end > CSS3 animation 2D, 3D conversion method
CSS3 animation 2D, 3D conversion method
- 高洛峰Original
- 2017-03-09 18:39:171595browse
This article introduces the method of 2D and 3D conversion of css3 animation
2D and 3D conversion code of css3 animation:
<!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>
The above is the detailed content of CSS3 animation 2D, 3D conversion method. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css3 multi-column and waterfall effect sample codeNext article：css3 multi-column and waterfall effect sample code