3D变换
程序员文章站
2022-03-27 13:13:50
...
3D变换相对于2D变换也就是在编写transform属性值时多了X，Y，Z轴而已
po个例子，简单易懂
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
perspective: 1000px;
}
#d1{
width: 100px;
height: 100px;
margin: 30px auto;
background-color: saddlebrown;
transition: all 0.7s;
transform-origin: 0 50%;
}
#d1:hover{
/* 沿Y轴旋转 */
transform: rotateY(180deg);
}
#container{
/* border: 1px solid #000; */
width: 500px;
height: 300px;
position: relative;
transition: 0.7s all;
/* 子元素保留父元素的3d变换效果 */
transform-style: preserve-3d;
}
#container:hover{
transform: rotatex(90deg);
}
#p1,#p2{
width: 500px;
height: 300px;
position: absolute;
left: 0;
top: 0;
}
#p1{
background-color: cadetblue;
transform: translateY(150px) rotateX(90deg);
}
#p2{
background-color: palegoldenrod;
transform: translateZ(150px);
}
</style>
</head>
<body>
<div id="d1">
3D立体变形
</div>
<div id="container">
<div id="p1"></div>
<div id="p2"></div>
</div>
</body>
</html>上一篇： 三维变换
下一篇： js声明式函数提升问题