前言

3Ｄ科技在我们的生活中有许多，那么如何能让我们自己做出来的网页带上一些3Ｄ效果呢？下面会有你想要的答案。

一、3D是什么？

通俗来讲3Ｄ效果就是近大远小，前面的物体遮住后面的物体，导致后面的物体不能被看到。
在前端的三维坐标系中，x轴水平向右，右正左负；y轴垂直向下，下正上负；z轴垂直屏幕，向外正向内负。

二、3Ｄ转换是什么？

在前端开发中，3Ｄ转换包括3d位移、3d旋转、透视、3d呈现。

1.3d位移：

语法：
transform：translateX(数值)
transform：translateY(数值)
transform：translateZ(数值)#z轴上距离单位一般为px，这样比较精确，不用百分比。
transform：translate3d(x，y，z)#此处x、y、z指的是距离大小，且x、y、z不能省略不写，如果不在某轴上移动则可以写为0。

代码如下（示例）：

//指在x轴正方向上移动50px
transform:translateX(50px);
//指在x轴、y轴、z轴正方向上各移动50px
transform:translate3d(50px,50px,50px);

注意！！：
（1）如果写为如下：

transform:translateX(50px);
transform:translate(50px);
//下边的样式会覆盖上边的样式，因为css具有层叠性，遵循就近原则。//可改为：
transform:translateX(50px) translateY(50px);

2.透视：

透视也叫视距，即人眼到屏幕的距离，在此设为d。
语法：
perspective：数值px（作用：使网页具有3d立体效果）
代码如下（示例）：

perspective:100px;

注意！！：
（1）perspective要写在被观察元素的父盒子上。
（2）视距d越小，z轴距离越大，所看到的物像越大。

3.3d旋转：

作用：让元素在x轴、y轴、z轴或自定义轴进行旋转。
语法：
transform：rotateX(数值deg)
transform：rotateY(数值deg)
transform：rotateZ(数值deg)
transform：rotate3d(x，y，z，deg)#x，y，z都可以为0或1。
代码如下（示例）：

//沿x轴旋转50度
transform:rotateX(50deg);
//沿Y轴旋转50度
transform:rotate3d(0,1,0,50deg);
//沿对角线旋转50度
transform:rotate3d(1,1,0,50deg);

判断角度数值正负情况下沿轴旋转的方法：
我自己总结的判断方法是：面向轴的负方向，数值为正时，图像绕轴顺时针旋转，数值为负时，图像绕轴逆时针旋转。

4.3d呈现：

transform-style：flat / preserve-3d；#取值默认为flat，此时子元素不开启3d立体空间。取值为preserve-3d时，子元素开启立体空间。

transform-style:flat;
//或者
transform-style:preserve-3d;

注意！！：
（1）代码写到父盒子里，但影响的是子盒子。

总结

以上就是今天想要和各位分享的内容，本文仅仅简单介绍了前端3的效果的实现的相关css属性及其用法，希望对各位有所帮助，本人也在学习中，如有解释不清楚的地方，还请各位指正。

【前端3d效果实现】相关推荐

6个绚丽时尚的Web前端3D效果展示（附源码）
作为一个前沿的 Web 开发者,对于 HTML5 和现在流行的3D技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大 ...
前端实现3d效果_前端动画效果实现的简单比较
合适的动画不仅更能吸引人们的眼球,也能让你的应用体验更为流畅,而将动画的效果做到极致,才能让用户感到使用你的应用是一种享受,而不是觉得生硬和枯燥.本文旨在探讨各种前端动画效果实现方式的异同,具体应用中 ...
从零开始前端学习[36]:Cs3中的3D效果实现
Cs3中的3D效果实现 perspective井深 transform-style 3D环境提示博主:章飞_906285288 博客地址:http://blog.csdn.net/qq_29924 ...
css3新动_10款重量级CSS3的全新特效实现超酷前端动画效果
大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...
android立体3D效果_Android实现八大行星绕太阳3D旋转效果
code小生一个专注大前端领域的技术平台公众号回复Android加入安卓技术群作者:史蒂芬诺夫斯基链接:https://www.jianshu.com/p/2954f2ef8ea5声明:本文已获史 ...
设计师：裸眼 3D 效果，你们客户端实现很难吗？
自如-黄进 | 作者承香墨影 | 编辑 https://juejin.cn/post/6989227733410644005 | 原文 Hi,大家好,这里是承香墨影! 说到裸眼 3D 效果,最先想到 ...
Android OpenGL 仿自如 APP 裸眼 3D 效果
概述之前看到自如团队发布的自如客APP裸眼3D效果的实现 ,非常有趣,不久后,社区内 Android 的开发者们陆续提供了 Flutter. Android 原生 .Android Jetpa ...
前端3D技术起源与发展
文章目录 1. 3D技术是什么 2. SGI(硅谷图形公司)与OpenGL 3. Khronos Group(科纳斯组织) 4. WebGL 5. three.js 6. react-three-fi ...
OpenCV中的姿势估计及3D效果（3D坐标轴，3D立方体）绘制
OpenCV中的姿势估计及3D效果(3D坐标轴,3D立方体)绘制 1. 效果图 2. 原理 3. 源码 3.1 姿态估计后绘制3D坐标轴 3.2 姿态估计后绘制立方体参考这篇博客将延续上一篇博客: ...

【前端3d效果实现】

文章目录

前言