<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{width:100px; height:100px; padding: 100px;border: 5px solid red; border-radius:10px;margin:100px;
transform-style: preserve-3d; /*添加3d环境*/
perspective: 200px; /*设置景深*/
}
span{display:block;width:100px; height:100px; background:red;
transition:1s;
}
#box:hover span{
transform:rotateX(190deg); /*3D变换*/
}
</style>
</head>
<body>
<div id="box">
<span>
</span>
</div>
3D效果，首先给需要进行3D变换的元素父级，添加3d环境和景深。
方法：
transform-style:perserve-3d; 添加3d环境
perspective:数值; 如：300px；
transform
rotateX
rotateY
rotateZ 大风车
translateX
translateY
translateZ
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{width:100px; height:100px; padding: 100px;border: 5px solid red; border-radius:10px;margin:100px;
transform-style: preserve-3d; /*添加3d环境*/
perspective: 200px; /*设置景深*/
}
span{display:block;width:100px; height:100px; background:red;
transition:1s;
}
#box:hover span{
transform:rotateX(190deg); /*3D变换*/
}
</style>
</head>
<body>
<div id="box">
<span>
</span>
</div>
3D效果，首先给需要进行3D变换的元素父级，添加3d环境和景深。
方法：
transform-style:perserve-3d; 添加3d环境
perspective:数值; 如：300px；
transform
rotateX
rotateY
rotateZ 大风车
translateX
translateY
translateZ
</body>
</html>
560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
