三维变换
程序员文章站
2022-03-27 13:13:56
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 100px;
background-color: red;
margin-left: 200px;
margin-top: 10px;
/* 过渡效果 */
transition: transform 2s;
}
/* 添加3D移动 */
div:first-of-type:active{
/* translate3d(x方向偏移，y方向偏移，z方向偏移) */
transform: translate3d(0px,0px,400px);
}
div:nth-of-type(2):active{
/* scale3d(x方向缩放，y方向缩放，z方向缩放) */
transform: scale3d(2,2,2);
}
div:nth-of-type(3):active{
/*rotate3d(x,y,z,angle):
x:代表x轴方向上的一个向量值
y:代表y轴方向上的一个向量值
z:代表z轴方向上的一个向量值*/
transform: rotate3d(1,1,1,60deg);
}
</style>
</body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</html>