• CSS3提高： CSS3 3D转换

    3D 转换

     我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。

    有什么特点

    近大远小。

    物体后面遮挡不可见

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

    三维坐标系

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

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

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

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

    3D 转换我们主要学习工作中最常用的  3D 位移 和  3D 旋转

    主要知识点

    3D位移: translate3d(x,y,z)

    3D旋转: rotate3d(x,y,z)

    透视: perspective

    3D呈现 transfrom-style

    3D移动 translate3d

    3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。 translform:translateX(100px)：仅仅是在x轴上移动

    translform:translateY(100px)：仅仅是在Y轴上移动

    translform:translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ一般用px单位）

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

    因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动

    透视 perspective

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

    如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。

    模拟人类的视觉位置，可认为安排一只眼睛去看 

    透视我们也称为视距：视距就是人的眼睛到屏幕的距离

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

    透视的单位是像素

    透视写在被观察元素的父盒子上面的

    d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。

    z：就是 z轴，物体距离屏幕的距离，z轴越大（正值） 我们看到的物体就越大。

     translateZ

    translform:translateZ(100px)：仅仅是在Z轴上移动。

    有了透视，就能看到translateZ 引起的变化了   

    translateZ：近大远小

    translateZ：往外是正值

    translateZ：往里是负值 

    3D旋转 rotate3d

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

    语法

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

    向里面的就是 rotateX的正轴

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

    rotateY正值 

    transform:rotateZ(45deg) ：沿着Z轴正方向旋转 45deg

    transform:rotate3d(x,y,z,deg)： 沿着自定义轴旋转 deg为角度（了解即可)

    对于元素旋转的方向的判断 我们需要先学习一个左手准则。

    左手准则

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

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

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

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

    transform:rotate3d(x,y,z,deg)： 沿着自定义轴旋转 deg为角度（了解即可）

    xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。

    transform:rotate3d(1,0,0,45deg) 就是沿着x轴旋转 45deg

    transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转 45deg

    3D呈现 transfrom-style

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

    transform-style: flat 子元素不开启3d立体空间  默认的

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

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

    这个属性很重要，后面必用

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <style>
    9.         body{
    10.             perspective: 300px;
    11.         }
    12.         .box{
    13.             
    14.             position: relative;
    15.             width: 200px;
    16.             height: 200px;
    17.             margin: 100px auto;
    18.             transition: all 2s;
    19.             /* 让子盒子保持3D立体空间环境 */
    20.             transform-style: preserve-3d;
    21.         }
    22.         .box:hover{
    23.              transform: rotateY(60deg);
    24.         }
    25.         .box div{
    26.             position: absolute;
    27.             top: 0;
    28.             left: 0;
    29.             width: 100%;
    30.             height: 100%;
    31.             background-color: pink;
    32.         }
    33.         .box div:last-child{
    34.             
    35.             background-color: purple;
    36.             transform: rotateX(60deg);
    37.         }
    38.     </style>
    39. </head>
    40. <body>
    41.     <div class="box">
    42.         <div></div>
    43.         <div></div>
    44.     </div>
    45. </body>
    46. </html>

    案例：两面翻转的盒子

     案例：实现步骤

    1. 搭建HTML结构 

    box父盒子里面包含前后两个子盒子

    box 是翻转的盒子  front是前面盒子 back是后面盒子

     2. CSS样式

    ①box指定大小，切记要添加3d呈现

    ②back盒子要沿着Y轴翻转180度

    ③最后鼠标经过box 沿着Y旋转180deg

    注意：backface-visibility:hidden 不面向屏幕时隐藏

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <style>
    10.         body{
    11.             perspective: 400px;
    12.         }
    13.         .box{
    14.             width: 300px;
    15.             height: 300px;
    16.             margin: 100px auto;
    17.             position: relative;
    18.             transition: all .6s;
    19.             /* 让背面的紫色盒子保留立体哦空间 */
    20.             transform-style: preserve-3d;
    21.         }
    22.         .box:hover{
    23.             transform: rotateY(180deg);
    24.         }
    25.         .front,.back{
    26.             position: absolute;
    27.             top: 0;
    28.             left: 0;
    29.             width: 100%;
    30.             height: 100%;
    31.             border-radius: 50%;
    32.             font-size: 30px;
    33.             color: #fff;
    34.             text-align: center;
    35.             line-height: 300px;
    36.         }
    37.         .front{
    38.             transform: translateZ(1px);
    39.             backface-visibility: hidden;
    40.             background-color: pink;
    41.             z-index: 1;
    42.         }
    43.         .back{
    44.             backface-visibility: hidden;
    45.             background: purple;
    46.             /* 像手机一样背靠背旋转 */
    47.             transform: rotateY(180deg);
    48.         }
    49.     </style>
    50. </head>
    51.  
    52. <body>
    53.     <div class="box">
    54.         <div class="front">前端小白</div>
    55.         <div class="back">在线寻找帮助</div>
    56.     </div>
    57. </body>
    58.  
    59. </html>

    案例：3D导航栏

    实现步骤

    1. 搭建HTML结构

    1. <ul>
    2.         <li>
    3.             <div class="box">
    4.                 <div class="front">前面</div>
    5.                 <div class="bottom">后面</div>
    6.             </div>
    7.         </li>
    8.         
    9.     </ul>

    li 做导航栏

    .box 是翻转的盒子  front是前面盒子 bottom是底下盒子

    2. CSS样式

    ①li设置大小，加透视和 3d呈现

    ②front 需要前移 17.5像素

    ③bottom 需要下移 17.5像素 并且要沿着x轴翻转  负90度

    ④鼠标放到box 让盒子旋转90度

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <style>
    10.         * {
    11.             margin: 0;
    12.             padding: 0;
    13.         }
    14.         
    15.         ul{
    16.             margin: 100px;
    17.         }
    18.         ul li{
    19.             float: left;
    20.             margin-left: 10px;
    21.             width: 120px;
    22.             height: 35px;
    23.             list-style: none;
    24.             line-height: 35px;
    25.             text-align: center;
    26.             color: black;
    27.             /* 一会我们需要给box旋转 也需要透视 干脆给li加 里面的子盒子都有透视效果 */
    28.             perspective: 500px;
    29.         }
    30.         .box{
    31.             transform-style: preserve-3d;
    32.             position: relative;
    33.             width: 100%;
    34.             height: 100%;
    35.             transition: all .4s;
    36.         }
    37.         .box:hover{
    38.             transform: rotateX(90deg);
    39.         }
    40.         .front,.bottom{
    41.             position: absolute;
    42.             left: 0;
    43.             right: 0;
    44.             width: 100%;
    45.             height: 100%;
    46.         }
    47.         .front{
    48.             z-index: 1;
    49.             background-color: pink;
    50.             transform: translateZ(17.5px);
    51.         }
    52.         .bottom{
    53.             background-color: purple;
    54.             /* 这个x轴一定是负值 */
    55.             /* 我们如果有移动 或者其他样式 必须先写我们的移动 */
    56.             transform:translateY(17.5px) rotateX(-90deg) ;
    57.         }
    58.     </style>
    59. </head>
    60.  
    61. <body>
    62.     <ul>
    63.         <li>
    64.             <div class="box">
    65.                 <div class="front">前面</div>
    66.                 <div class="bottom">后面</div>
    67.             </div>
    68.         </li>
    69.         <li>
    70.             <div class="box">
    71.                 <div class="front">前面</div>
    72.                 <div class="bottom">后面</div>
    73.             </div>
    74.         </li>
    75.         <li>
    76.             <div class="box">
    77.                 <div class="front">前面</div>
    78.                 <div class="bottom">后面</div>
    79.             </div>
    80.         </li>
    81.         <li>
    82.             <div class="box">
    83.                 <div class="front">前面</div>
    84.                 <div class="bottom">后面</div>
    85.             </div>
    86.         </li>
    87.         <li>
    88.             <div class="box">
    89.                 <div class="front">前面</div>
    90.                 <div class="bottom">后面</div>
    91.             </div>
    92.         </li>
    93.         
    94.     </ul>
    95. </body>
    96.  
    97. </html>

     案例：旋转木马

    实现步骤

    1. <section>
    2.     <div></div>
    3.     <div></div>
    4.     <div></div>
    5.     <div></div>
    6.     <div></div>
    7.     <div></div>
    8. </section>

    里面的6个div 分别是 6个狗狗图片

    注意最终旋转是section标签 旋转

    2. CSS样式

    ①给body添加 透视效果 perspective: 1000px;

    ②给section 添加 大小，一定不要忘记添加  3d呈现效果控制里面的6个div

    别忘记子绝父相，section要加相对定位

    ③里面6个div 全部绝对定位叠到一起，然后移动不同角度旋转和距离

    注意：旋转角度用rotateY   距离 肯定用 translateZ来控制

    ④给section  添加动画animation ，让它可以自动旋转即可

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <style>
    10.         body{
    11.             /* 现在版本不一样，只能给真正的父元素加才有效 */
    12.             perspective: 1000px;
    13.         }
    14.         section{
    15.             transform-style: preserve-3d;
    16.             /* perspective: 1000px; */
    17.             position: relative;
    18.             width: 300px;
    19.             height: 200px;
    20.             margin: 150px auto;
    21.             /* 添加动画 */
    22.             animation: rotate 3s linear infinite;
    23.             background: url(media/pig.jpg);
    24.         }
    25.         section:hover{
    26.             /* 鼠标放入停止动画 */
    27.             animation-play-state: paused;
    28.         }
    29.         @keyframes rotate{
    30.             from{
    31.                 transform: rotateY(0);
    32.             }
    33.             to{
    34.                 transform: rotateY(360deg);
    35.             }
    36.         }
    37.         section div{
    38.             
    39.             position: absolute;
    40.             top: 0;
    41.             left: 0;
    42.             width: 100%;
    43.             height: 100%;
    44.             background: url(media/dog.jpg) no-repeat;
    45.         }
    46.         section div:nth-child(1){
    47.             transform:rotateY(0deg) translateZ(300px);
    48.         }
    49.         section div:nth-child(2){
    50.             /* 先旋转好了 再移动 */
    51.             transform: rotateY(60deg) translateZ(300px);
    52.         }
    53.         section div:nth-child(3){
    54.             /* 先旋转好了 再移动 */
    55.             transform: rotateY(120deg) translateZ(300px);
    56.         }
    57.         section div:nth-child(4){
    58.             /* 先旋转好了 再移动 */
    59.             transform: rotateY(180deg) translateZ(300px);
    60.         }
    61.         section div:nth-child(5){
    62.             /* 先旋转好了 再移动 */
    63.             transform: rotateY(240deg) translateZ(300px);
    64.         }
    65.         section div:nth-child(6){
    66.             /* 先旋转好了 再移动 */
    67.             transform: rotateY(300deg) translateZ(300px);
    68.         }
    69.     </style>
    70. </head>
    71.  
    72. <body>
    73.     <section>
    74.         <div></div>
    75.         <div></div>
    76.         <div></div>
    77.         <div></div>
    78.         <div></div>
    79.         <div></div>
    80.     </section>
    81. </body>
    82.  
    83. </html>

  • 相关阅读:
    1985-2020（8个版次）全球地表覆盖下载与介绍
    Spring Cloud OpenFeign 开启 httpclient5
    用DIV+CSS技术设计的水果介绍网站（web前端网页制作课作业）
    Spatio-temporal Self-Supervised Representation Learning for 3D Point Clouds
    map-reduce中的组件
    [electron] electron环境搭建
    JS高级：闭包的缺点即解决
    jemter使用和优化
    基于企鹅优化算法的机器人轨迹规划（Matlab代码实现）
    八大排序之归并排序
  • 原文地址：https://blog.csdn.net/weixin_64612659/article/details/127638595