css3动画2D、3D转换

最新推荐文章于 2025-09-07 01:02:55 发布

weixin_34037515

最新推荐文章于 2025-09-07 01:02:55 发布

阅读量77

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/3042303/blog/855959

本文通过几个具体的示例展示了如何使用CSS3实现不同的动画效果，包括平移、旋转、缩放及倾斜等基本变换，同时也介绍了如何应用3D旋转。

2019独角兽企业重金招聘Python工程师标准>>>

<!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/>