您现在的位置是：主页 > news > 适合vue做的网站类型/短视频营销优势
适合vue做的网站类型/短视频营销优势
admin2025/5/22 0:36:25【news】
简介适合vue做的网站类型,短视频营销优势,wordpress getusers,跳转网站怎么做浏览器平面为二维平面，以浏览器可视区域左上角为原点，X轴为左上到右上，正方向为右；Y轴为左上到左下，正方向为下。 要想实现3D效果，我们需要引入Z轴，这条Z轴垂直于屏幕，以出平面为正…
浏览器平面为二维平面，以浏览器可视区域左上角为原点，X轴为左上到右上，正方向为右；Y轴为左上到左下，正方向为下。
要想实现3D效果，我们需要引入Z轴，这条Z轴垂直于屏幕，以出平面为正方向。
transform产生的位移和旋转都不脱标！！！
1、3D位移
3D位移函数与2D位移一样，需要使用transfrom变量，变量值有如下几个：
1、transform:translateX(位移量)
2、transform:translateY(位移量)
3、transform:translateZ(位移量)
4、transform:translate3d(X位移量，Y位移量，Z位移量)
当我们对盒子设置transform:translateZ(位移量)时，我们发现浏览器中盒子并未产生变换，这是由于未对父元素设置视距perspective，导致我们无法直观感受到Z轴导致的。
当我们对盒子的父元素添加perspective：800px后便可直观感受到Z轴移动了；perspective视距函数是指用户的眼睛到浏览器平面的距离，根据经验，这个数值一般取800px到1200px之间。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D移动</title><style>body {/* 使用transform:translate3d必须使用设置视距,否则z轴移动无法直观观测 *//* perspective视距值一般取800-1200px *//* 此函数给父级元素加 */perspective: 800px;}div {width: 200px;height: 200px;margin: 50px auto;background-color: orange;}div:hover {/* translate3d(x轴,y轴,z轴) */transform: translate3d(0,0,200px);}</style>
</head>
<body><div></div>
</body>
</html>2、3D旋转
3D旋转的变量值有如下几个：
1、transform:rotateX(旋转量)
2、transform:rotateY(旋转量)
3、transform:rotateZ(旋转量)
4、transform:rotate3d(X旋转量，Y旋转量，Z旋转量)
旋转正方向为X>Y；Y>Z；Z>X
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {perspective: 800px;}img {display: block;width: 400px;margin: 40px auto;transition: all 1s;}img:nth-child(1):hover {transform: rotateX(60deg);}img:nth-child(2):hover {transform: rotateY(60deg);}img:nth-child(3):hover {transform: rotateZ(60deg);}</style>
</head><body><img src="./images/hero.jpeg" alt=""><img src="./images/hero.jpeg" alt=""><img src="./images/hero.jpeg" alt=""></body></html>
