20231030
文章目录
- 空间位移
- 空间旋转
- 立体呈现transform-style: preserve-3d;
- 3D导航
- 空间缩放
空间位移
语法：
transform:translate3d(x,y,z);
transform.translateX(值);
transform.translateY(值);
transform.translateZ(值);
透视属性：perspective:值;（添加给父级，建议800~1200）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>空间转换-位移透视</title><style>body {perspective: 1000px;}.box {width: 200px;height: 200px;background-color: cadetblue;margin: 300px auto;transition: all 0.3s;}.box:hover {transform: translateZ(200px);}</style>
</head><body><div class="box"></div>
</body></html>
空间旋转
transform:rotateZ(值);
transform:rotateX(值);
transform:rotateY(值);
transform:(x,y,z,角度度数);（用来设置自定义旋转轴的位置及旋转的角度，x、y、z取值0-1之间的数字）
立体呈现transform-style: preserve-3d;
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>立体呈现</title><style>.cube {width: 200px;height: 200px;margin: 300px auto;position: relative;transition: all 1s;/* 添加过渡效果，使变换平滑进行，持续1秒 */transform-style: preserve-3d;/* 设置立方体的变换样式为保留3D效果 */}.cube div {position: absolute;left: 0;top: 0;width: 200px;height: 200px;color: whitesmoke;text-align: center;font-size: 80px;line-height: 200px;}.front {background-color: blueviolet;transform: translateZ(200px);/* 将前面面板平移200像素，使其位于立方体的前面 */}.back {background-color: brown;}.cube:hover {transform: rotateY(180deg);/* 鼠标悬停时，使立方体绕Y轴旋转180度 */}</style>
</head><body><div class="cube"><div class="front">前面</div><div class="back">后面</div></div>
</body></html>
3D导航
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3d导航</title><style>* {margin: 0;padding: 0;}.navs {width: 300px;height: 40px;margin: 50px auto;}.navs li {float: left;width: 100px;height: 40px;line-height: 40px;transition: all .5s;/* 添加过渡效果，使变换平滑进行，持续0.5秒 */list-style: none;position: relative;transform-style: preserve-3d;/* 设置导航菜单的变换样式为保留3D效果 */}.navs li a {display: block;width: 100%;height: 100%;text-align: center;color: white;text-decoration: none;position: absolute;left: 0;top: 0;}.navs li a:first-child {background-color: green;transform: translateZ(20px);/* 将第一个链接平移20像素，使其稍微凸起 */}.navs li a:last-child {background-color: orange;transform: rotateX(90deg) translateZ(20px);/* 将最后一个链接绕X轴旋转90度，并沿Z轴平移20像素，使其垂直呈现 */}.navs li:hover {transform: rotateX(-90deg);/* 当鼠标悬停在导航菜单上方时，使菜单绕X轴旋转-90度，实现翻转效果 */}</style>
</head><body><div class="navs"><ul><li><a href="#">首页</a><a href="#">Index</a></li><li><a href="#">登录</a><a href="#">Login</a></li><li><a href="#">注册</a><a href="#">Register</a></li></ul></div>
</body></html>
空间缩放
transform:scaleX(值);
transform:scaleY(值);
transform:scaleZ(值);
transform:scale3d(x,y,z);
更多推荐
20231030
发布评论