css3動畫2D、3D轉換的方法
- 高洛峰原創
- 2017-03-09 18:39:171691瀏覽
這篇文章介紹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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn