• 前端【css3D转换】

    认识3D转换

    「3D的特点」近大远小，物体和面遮挡不可见

    「三维坐标系」

    • x 轴：水平向右  -- 注意：x 轴右边是正值，左边是负值

    • y 轴：垂直向下  -- 注意：y 轴下面是正值，上面是负值

    • z 轴：垂直屏幕  --  注意：往外边的是正值，往里面的是负值

    3D转换

    1.  3D 转换知识要点

    • 3D 位移：translate3d(x, y, z)

    • 3D 旋转：rotate3d(x, y, z)

    • 透视 ：perspctive

    • 3D呈现 transfrom-style

    2.  3D 移动translate3d

    • 3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向

    • transform: translateX(100px)：仅仅是在 x 轴上移动

    • transform: translateY(100px)：仅仅是在 y 轴上移动

    • transform: translateZ(100px)：仅仅是在 z 轴上移动

    • transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离

    • 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充

    1.   transform: translate3d(100px, 100px, 100px)
    2.   /* 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充 */
    3.   transform: translate3d(100px, 100px, 0)

    透视perspective

    • 知识点讲解

      • 如果想要网页产生 3D 效果需要透视(理解成 3D 物体投影的 2D 平面上)

      • 实际上模仿人类的视觉位置，可视为安排一只眼睛去看

      • 透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离

      • 距离视觉点越近的在电脑平面成像越大，越远成像越小

      • 透视的单位是像素

    • 知识要点

      • 透视需要写在被视察元素的父盒子上面

      • 注意下方图片

      • d：就是视距，视距就是指人的眼睛到屏幕的距离

      • z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大

    代码演示

    1. body {
    2.   /*透视需要写在被视察元素的父盒子上面 */
    3.   perspective: 1000px;
    4. }

    translateZ与perspective的区别

    • perspecitve 给父级进行设置视距的，translateZ 给 子元素进行设置不同的大小

    3D 旋转rotateX

    3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转

    • 语法：

      • transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度

      • transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度

      • transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度

      • transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转 45 deg 为角度

    • 左手法则：

      • 左手的手拇指指向 x 轴的正方向

      • 其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向

    1. div {
    2.   /*透视写在被视察元素的父盒子上面 */
    3.   perspective: 300px;
    4. }
    5. /*被观察元素*/
    6. img {
    7.   display: block;
    8.   margin: 100px auto;
    9.   transition: all 1s;
    10. }
    11.  
    12. img:hover {
    13.   transform: rotateX(-45deg)
    14. }

    3D 旋转rotateY

    • 左手法则：

      • 左手的拇指指向 y 轴的正方向

      • 其余的手指弯曲方向就是该元素沿着 y 轴旋转的方向(正值)

    1. div {
    2.   perspective: 500px;
    3. }
    4.  
    5. img {
    6.   display: block;
    7.   margin: 100px auto;
    8.   transition: all 1s;
    9. }
    10.  
    11. img:hover {
    12.   transform: rotateY(180deg)
    13. }

    3D 旋转rotateZ

    1. div {
    2.   perspective: 500px;
    3. }
    4.  
    5. img {
    6.   display: block;
    7.   margin: 100px auto;
    8.   transition: all 1s;
    9. }
    10.  
    11. img:hover {
    12.   transform: rotateZ(180deg)
    13. }

    「rotate3d」

    • transform: rotate3d(x, y, z, deg) -- 沿着自定义轴旋转 deg 为角度

    • x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度

      • transform: rotate3d(1, 1, 0, 180deg) -- 沿着对角线旋转 45deg

      • transform: rotate3d(1, 0, 0, 180deg) -- 沿着 x 轴旋转 45deg

    1. div {
    2.   perspective: 500px;
    3. }
    4.  
    5. img {
    6.   display: block;
    7.   margin: 100px auto;
    8.   transition: all 1s;
    9. }
    10.  
    11. img:hover {
    12.   transform: rotate3d(1, 1, 0, 180deg)
    13. }

    3D呈现transform-style

    • 控制子元素是否开启三维立体环境

    • transform-style: flat  代表子元素不开启 3D 立体空间，默认的

    • transform-style: preserve-3d 子元素开启立体空间

    • 代码写给父级，但是影响的是子盒子

    1. <body>
    2.     <div class="box">
    3.         <div></div>
    4.         <div></div>
    5.     </div>
    6. </body>
  • 相关阅读:
    VPS、独服和云服务器哪种最适合您的业务？
    20道你必须要背会的微服务面试题，面试一定会被问到
    基于SSM实现家政管理平台的开发和实现
    IPKISS Tutorials 2------导入IPKISS模块
    Oracle数据库安装，在自己的windows电脑上面。
    Centos7 ELK 8.2 集群配置
    ElasticSearch集群缩容
    常见的8种排序（含代码）：插入排序、冒泡排序、希尔排序、快速排序、简单选择排序、归并排序、堆排序、基数排序
    深入剖析HTTP和HTTPS代理在爬虫中的应用价值
    为什么说Crypto游戏正在改变游戏产业？
  • 原文地址：https://blog.csdn.net/m0_62336865/article/details/127099959