• 【Transform3D】转换详解（看完就会）

    文章内包含个人理解，如有错误请指出。 

      往期文章

    【css动画】移动的小车

    【CSS3】 float浮动与position定位常见问题（个人笔记）

    如何完成响应式布局，有几种方法？看这个就够了

    详解 CSS3中最好用的布局方式——flex弹性布局（看完就会）

    [前端CSS高频面试题]如何画0.5px的边框线（详解）
    CSS3基础属性大全
    CSS3动画属性 animation详解（看完就会）
    CSS3 transform 2D转换之移动 旋转 缩放（详细讲解看完就会）
    CSS3 Z—Index 详解
    CSS3 positon定位详解（通俗易懂）

    目录

    前言

    教学

            坐标轴

            移动

            旋转

            透视

            打开3D空间

    总结 

    案例

            3D转换

            3D翻转

    前言

    3D可以帮助我们实现更好的页面动画效果，我们生活的环境是 3D 的，照片就是 3D 物体在 2D 平面呈现的例子。

    有什么特点

    • 近大远小
    • 物体后面遮挡不可见

    当我们在网页上构建 3D 效果的时候参考这些特点就能产出 3D 效果。

    教学

            坐标轴

                    

                    三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

                    在x，y轴的基础上，又增加了一条从外向内的Z轴， 

                    在这里插入图片描述 

            移动

    x 轴水平向右（注意：x 右边是正值，左边是负值）
    y 轴垂直向下（注意：y 下面是正值，上面是负值）
    z 轴垂直屏幕（注意：往外面是正值，往里面是负值）

         注意重点：坐标轴原点为图形的左上角

    1. <style>
    2. #div1
    3. {
    4. 	position: relative;
    5. 	height: 200px;
    6. 	width: 200px;
    7. 	margin: 100px;
    8. 	padding:10px;
    9. 	border: 1px solid black;
    10. 	
    11. }
    12.  
    13. #div2
    14. {
    15. 	padding:50px;
    16. 	position: absolute;
    17. 	border: 1px solid black;
    18. 	background-color: red;
    19. 	transform: translateX(100px);
    20.     z-index: 1;
    21. 	
    22. }
    23. #div3
    24. {
    25. 	padding:50px;
    26. 	position: absolute;
    27. 	border: 1px solid black;
    28. 	background-color: red;
    29. 	
    30.  
    31. 	
    32. }
    33. style>
    34. head>
    35.  
    36. <body>
    37.  
    38. <div id="div1">
    39.   <div id="div2">HELLOdiv>
    40.   <div id="div3">HELLOdiv>
    41. div>
    42.  
    43. body>

     

    左边的是原位置的，右边的是移动100px的。

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

    • transform:translateX(100px)：仅仅是在 X 轴上移动  （x轴右边）
    • transform:translateY(100px)：仅仅是在 Y 轴上移动    （Y轴下边）
    • transform:translateZ(100px)：仅仅是在 Z 轴上移动（注意：translateZ 一般用 px 单位，Z轴向外。）
    • transform:translate3d(x, y, z)：其中 x、y、z 分别指要移动的轴的方向的距离

    因为 z 轴是垂直屏幕，由里指向外面，所以默认是看不到元素在 z 轴的方向上移动（要借助透视）。

            旋转

            在这里插入图片描述

    1. <style>
    2. #div1
    3. {
    4. 	position: relative;
    5. 	height: 200px;
    6. 	width: 200px;
    7. 	margin: 100px;
    8. 	padding:10px;
    9. 	border: 1px solid black;
    10. 	
    11. }
    12.  
    13. #div2
    14. {
    15. 	padding:50px;
    16. 	position: absolute;
    17. 	border: 1px solid black;
    18. 	background-color: green;
    19. 	transform: rotateX(100deg);
    20.     z-index: 1;
    21. 	
    22. }
    23. #div3
    24. {
    25. 	padding:50px;
    26. 	position: absolute;
    27. 	border: 1px solid black;
    28. 	background-color: red;
    29. 	
    30.  
    31. 	
    32. }
    33. style>
    34. head>
    35.  
    36. <body>
    37.  
    38. <div id="div1">
    39.   <div id="div2">HELLOdiv>
    40.   <div id="div3">HELLOdiv>
    41. div>
    42.  
    43. body>

      

     以x轴旋转100°，就是向里旋转100°，看着变窄了是因为没有使用透视，绕Z轴旋转就跟2d旋转一样。

    transform:rotate3d(0,1,0,45deg)  绕y轴旋转45°，前三位分别是 xyz  ，写1就是选择某个坐标轴，  第四位写度数。

    矢量旋转：
    transform:rotate3d(1,1,0,45deg) 第四域的对角线旋转45°。

    注意重点：坐标轴原点为图形的中心点，实际上是由左上角的原点，通过transform-origin:50% 50% ;移动到了图形的中心点，transform-origin的默认值就是 50% 505 0;我们可以通过transform-origin属性来改变原点的位置，  注意中的注意就是  这个属性只是改变旋转的中心点，translate移动的的中心点不变，依然是左上角的。

            透视

    在 2D 平面产生近大远小视觉立体，但是效果只是二维的。

    • 如果想要在网页产生 3D 效果需要透视（理解成 3D 物体投影在 2D 平面内）
    • 模拟人类的视觉位置，可认为安排一只眼睛去看
    • 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
    • 距离视觉点越近的，在电脑平面成像越大，越远成像越小
    • 透视的单位是像素

    我们给之前的3dX旋转加上透视效果， 

                   

    1. <style>
    2. #div1
    3. {
    4. 	position: relative;
    5. 	height: 200px;
    6. 	width: 200px;
    7. 	margin: 100px;
    8. 	padding:10px;
    9. 	border: 1px solid black;
    10. 	perspective: 500px;
    11. 	
    12. }
    13.  
    14. #div2
    15. {
    16. 	padding:50px;
    17. 	position: absolute;
    18. 	border: 1px solid black;
    19. 	background-color: green;
    20. 	transform: rotateX(100deg);
    21.     z-index: 1;
    22. 	
    23. }
    24. #div3
    25. {
    26. 	padding:50px;
    27. 	position: absolute;
    28. 	border: 1px solid black;
    29. 	background-color: red;
    30. 	
    31.  
    32. 	
    33. }
    34. style>
    35. head>
    36.  
    37. <body>
    38.  
    39. <div id="div1">
    40.   <div id="div2">HELLOdiv>
    41.   <div id="div3">HELLOdiv>
    42. div>
    43.  
    44. body>

    这样在平面上通过透视产生一种长短大小不一的3d效果。

    perspective就相当于人眼到图像的距离，就相当于你看某个东西，你距离写的越大，你就站的越远，物体就越小，站的越近，距离写的越小，物体越大。

    页面上显示的就相当于是你看到的物体的投影。

    perspective尽可能写在直接父级上，写在大于父亲级的祖元素上有可能会失灵，但如果搭配transform-style: preserve-3d,两个一起用，又会起作用。

    perspective只是实现了2d里的3d视觉显示，并不是一个3d空间，就比如前面的div向里倾斜，如果是3d的空间的话 那么会穿透后面的红色盒子，如何达到真正的3d效果呢   就是接下来要说的的属性。

            打开3D空间

            transform-style: preserve-3d;  

            看例子

    1.   <style>
    2.         #div1 {
    3.             position: relative;
    4.             height: 200px;
    5.             width: 200px;
    6.             margin: 100px;
    7.             padding: 10px;
    8.             border: 1px solid black;
    9.             perspective: 300px;
    10.             transform-style: preserve-3d;
    11.             transition: all 3s;
    12.         }
    13.  
    14.         #div1:hover {
    15.             transform: rotateY(-120deg);
    16.         }
    17.  
    18.         #div2 {
    19.             padding: 50px;
    20.             position: absolute;
    21.             border: 1px solid black;
    22.             background-color: green;
    23.             transform: rotateX(60deg);
    24.             z-index: 1;
    25.  
    26.  
    27.         }
    28.  
    29.         #div3 {
    30.             padding: 50px;
    31.             position: absolute;
    32.             border: 1px solid black;
    33.             background-color: red;
    34.  
    35.  
    36.  
    37.         }
    38.     style>
    39. head>
    40.  
    41. <body>
    42.  
    43.     <div id="div1">
    44.         <div id="div2">HELLOdiv>
    45.         <div id="div3">HELLOdiv>
    46.     div>
    47.  
    48. body>

            

    下面是给box盒子加上透视的效果


           

    总结 

    1.移动的中心点跟旋转中心点是分开的，transform-origin只是修改旋转的原点，移动位置不变依然是左上角。

    2.3d旋转是坐标轴是跟随移动的，所以建议当完成某种效果时，先移动后旋转，先旋转改变坐标轴，移动的方向就会有差别。

    3.想要完成一个3D效果 需要用到perspective: 500px;和 transform-style: preserve-3d;两个属性才能完全达到3D效果，注意perspective属性放在更高的父级上的效果区别，建议用在直接父级上。

    案例

            3D转换

    1.    <style>
    2.         * {
    3.             margin: 0;
    4.             padding: 0;
    5.         }
    6.  
    7.         ul {
    8.             margin: 100px;
    9.  
    10.         }
    11.  
    12.         ul li {
    13.             width: 120px;
    14.             height: 35px;
    15.             list-style: none;
    16.             float: left;
    17.             margin-left: 10px;
    18.             text-align: center;
    19.             color: white;
    20.         }
    21.  
    22.         .box {
    23.             position: relative;
    24.             width: 100%;
    25.             height: 100%;
    26.             perspective: 500px;
    27.             transform-style: preserve-3d;
    28.             transition: all 1s;
    29.             line-height: 35px;
    30.         }
    31.  
    32.         .box:hover {
    33.             transform: rotateX(90deg);
    34.         }
    35.  
    36.         .front,
    37.         .bottom {
    38.             position: absolute;
    39.             left: 0;
    40.             top: 0;
    41.             right: 0;
    42.             bottom: 0;
    43.         }
    44.  
    45.         .front {
    46.             background-color: pink;
    47.             transform: translateZ(17.5px);
    48.             z-index: 1;
    49.         }
    50.  
    51.         .bottom {
    52.             background-color: purple;
    53.             transform: translateY(17.5px) rotateX(-90deg);
    54.         }
    55.     style>
    56. head>
    57.  
    58. <body>
    59.     <ul>
    60.         <li>
    61.             <div class="box">
    62.                 <div class="front">黑马程序员div>
    63.                 <div class="bottom">pink老师div>
    64.             div>
    65.         li>
    66.         <li>
    67.             <div class="box">
    68.                 <div class="front">黑马程序员div>
    69.                 <div class="bottom">pink老师div>
    70.             div>
    71.         li>
    72.         <li>
    73.             <div class="box">
    74.                 <div class="front">黑马程序员div>
    75.                 <div class="bottom">pink老师div>
    76.             div>
    77.         li>
    78.         <li>
    79.             <div class="box">
    80.                 <div class="front">黑马程序员div>
    81.                 <div class="bottom">pink老师div>
    82.             div>
    83.         li>
    84.     ul>
    85. body>

            3D翻转

    1.  <style>
    2.         .box {
    3.             width: 300px;
    4.             height: 300px;
    5.             margin: 100px auto;
    6.             position: relative;
    7.             transition: all 3s;
    8.             transform-style: preserve-3d;
    9.         }
    10.  
    11.         .box:hover {
    12.             transform: rotateY(180deg);
    13.         }
    14.  
    15.         .front {
    16.             backface-visibility: hidden;
    17.         }
    18.  
    19.         .front,
    20.         .back {
    21.  
    22.             position: absolute;
    23.             left: 0;
    24.             right: 0;
    25.             height: 100%;
    26.             border-radius: 50%;
    27.             color: #fff;
    28.             text-align: center;
    29.             font-size: 30px;
    30.             line-height: 300px;
    31.         }
    32.  
    33.         .front {
    34.             background-color: pink;
    35.             z-index: 1;
    36.         }
    37.  
    38.         .back {
    39.             background-color: purple;
    40.             transform: rotate3d(0, 1, 0, 180deg);
    41.         }
    42.     style>
    43. head>
    44.  
    45. <body>
    46.     <div class="box">
    47.         <div class="front">黑马程序员div>
    48.         <div class="back">pink老师div>
    49.     div>
    50. body>

  • 相关阅读:
    RASP技术进阶系列（二）：东西向Web流量的智能检测防御
    专享策略02 | 套利策略-自动换仓-出场加速
    前端中常见概念对比
    Verilog task使用说明
    uniapp打包：本应用使用HBuilderX 3.8.7或对应的cli版本编译，而手机端SDK版本是3.8.12.不匹配的版本可能造成应用异常
    .net core MVC不用端口号访问
    2022 lineCTF WEB复现WriteUp
    【面试】个人宝典 查缺补漏
    使用pyqtgraph生成一个能够播放图片的窗口
    低版本浏览器使用最新渲染模式以免IE不支持CSS3属性
  • 原文地址：https://blog.csdn.net/m0_62360527/article/details/127271718