20px) ; } / style / head body div / div / body / html 3D旋转之
标签：
3D转换之移动3D移动在2D移动的根本上多加了一个可以移动的标的目的,就是Z轴标的目的
语法:
transform: translateX(100px); transform: translateY(100px); /* 注意这个我们一般使用px单位 */ transform: translateZ(100px); /* 此中x y z 分袂指要移动的轴的标的目的的距离 */ transform: translate3d(x,y,z);
代码示例:
<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>3D转换之移动</title> <style> * { transform: translateX(100px); transform: translateY(100px); /* 注意这个我们一般使用px单位 */ transform: translateZ(100px); /* 此中x y z 分袂指要移动的轴的标的目的的距离 */ transform: translate3d(x, y, z); } div { width: 200px; height: 200px; background-color: pink; transition: all 1s linear; } div:hover { transform: translate3d(100px, 100px, 20px); } </style> </head> <body> <div></div> </body> </html>
透视perspective如果想要在网页上孕育产生3d效果需要透视
透视我们也称之为视距：就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面上的成像越大，越远成像越小(近大远小)
透视(视距)的单位是像素
透视写在被不雅察看盒子的父盒子上面
d：就是视距 视距就是一个距离人的眼睛到屏幕的距离
z：就是z轴 物体距离屏幕的距离 z轴越大 我们看到的物体就越大
上面的代码 如果想让20px有效果 就要写成下面这样的
<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>3D转换之移动</title> <style> body { /* 透视写到被不雅察看元素的父盒子上 */ /* 远小近大 */ perspective: 200px; } div { width: 200px; height: 200px; background-color: pink; transition: all 1s linear; } div:hover { transform: translate3d(100px, 100px, 20px); } </style> </head> <body> <div></div> </body> </html>
3D旋转之旋转(rotate3d)语法:
transform: rotate3d(x,y,z); transform: rotateX(X轴角度); transform: rotateY(Y轴角度); transform: rotateZ(Z轴角度);
小小案例:
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/30940.html
- 上一篇：description=详细描述
- 下一篇：Web自动化测试项目（五）测试功效通知
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")