Compartir tecnología

capítulo avanzado html

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Conversión 1.2D

La transformación puede entenderse simplemente como deformación.

Móvil: traducir

rotar: rotar

Zoom: escala

  1. Móvil: traducir
1.Mover valores específicos
  1.          /* 移动盒子的位置： 定位   盒子的外边距  2d转换移动 */
  2.  
  3.         
  4.  
  5.         div {
  6.  
  7.             width: 200px;
  8.  
  9.             height: 200px;
  10.  
  11.             background-color: pink;
  12.  
  13.             /* x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔*/
  14.  
  15.             /* transform: translate(x, y); */
  16.  
  17.             /* transform: translate(100px, 100px); */
  18.  
  19.             /* 1. 我们如果只移动x坐标 */
  20.  
  21.             /* transform: translate(100px, 0); */
  22.  
  23.             /* transform: translateX(100px); */
  24.  
  25.             /* 2. 我们如果只移动y坐标 */
  26.  
  27.             /* transform: translate(0, 100px); */
  28.  
  29.             /* transform: translateY(100px); */
  30.  
  31.         }
  32.  
  33.         
  34.  
  35.         div:first-child {
  36.  
  37.             transform: translate(30px, 30px);
  38.  
  39.         }
  40.  
  41.         
  42.  
  43.         div:last-child {
  44.  
  45.             background-color: purple;
  46.  
  47.         }
2.Porcentaje de movimiento
  1.   div {
  2.  
  3.             position: relative;
  4.  
  5.             width: 500px;
  6.  
  7.             height: 500px;
  8.  
  9.             background-color: pink;
  10.  
  11.             /* 1. 我们tranlate里面的参数是可以用 % */
  12.  
  13.             /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
  14.  
  15.             /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
  16.  
  17.             /* transform: translateX(50%); */
  18.  
  19.         }
  20.  
  21.         p {
  22.  
  23.             position: absolute;
  24.  
  25.             top: 50%;
  26.  
  27.             left: 50%;
  28.  
  29.             width: 200px;
  30.  
  31.             height: 200px;
  32.  
  33.             background-color: purple;
  34.  
  35.             /* margin-top: -100px;
  36.  
  37.             margin-left: -100px; */;
  38.  
  39.             /* 盒子往上走自己高度的一半    */
  40.  
  41.             transform: translate(-50%, -50%);
  42.  
  43.         }

2. Girar: girar

1.Rotación de imagen
  1.  img {
  2.  
  3.             width: 150px;
  4.  
  5.             /* 顺时针旋转45度 */
  6.  
  7.             /* transform: rotate(45deg); */
  8.  
  9.             border-radius: 50%;
  10.  
  11.             border: 5px solid pink;
  12.  
  13.             /* 过渡写到本身上，谁做动画给谁加 */
  14.  
  15.             transition: all 0.3s;
  16.  
  17.         }
  18.  
  19.         
  20.  
  21.         img:hover {
  22.  
  23.             transform: rotate(90deg);
  24.  
  25.         }
  26.  
  27.     </style>
  28.  
  29. </head>
  30.  
  31.  
  32. <body>
  33.  
  34.     <img src="media/pic.jpg" alt="">
  35.  
  36. </body>
2. Triángulo pequeño
  1.   div {
  2.  
  3.             position: relative;
  4.  
  5.             width: 249px;
  6.  
  7.             height: 35px;
  8.  
  9.             border: 1px solid #000;
  10.  
  11.         }  
  12.  
  13.         div::after {
  14.  
  15.             content: "";
  16.  
  17.             position: absolute;
  18.  
  19.             top: 8px;
  20.  
  21.             right: 15px;
  22.  
  23.             width: 10px;
  24.  
  25.             height: 10px;
  26.  
  27.             border-right: 1px solid #000;
  28.  
  29.             border-bottom: 1px solid #000;
  30.  
  31.             transform: rotate(45deg);
  32.  
  33.             transition: all 0.2s;
  34.  
  35.         }
  36.  
  37.         /* 鼠标经过div  里面的三角旋转 */
  38.  
  39.         
  40.  
  41.         div:hover::after {
  42.  
  43.             transform: rotate(225deg);
  44.  
  45.         }
  1. Establecer el punto central de rotación

1. gramática

origen-transformación:xy;

2. Puntos clave

·Tenga en cuenta que los siguientes parámetros xey están separados por espacios

·El punto central de la conversión predeterminada xy es el punto central del elemento (50%50%)

·También puedes configurar píxeles o nombres de orientación para xy (arriba, abajo, izquierda, derecha, centro)

  1.   div {
  2.  
  3.             width: 200px;
  4.  
  5.             height: 200px;
  6.  
  7.             background-color: pink;
  8.  
  9.             margin: 100px auto;
  10.  
  11.             transition: all 1s;
  12.  
  13.             /* 1.可以跟方位名词 */
  14.  
  15.             /* transform-origin: left bottom; */
  16.  
  17.             /* 2. 默认的是 50%  50%  等价于 center  center */
  18.  
  19.             /* 3. 可以是px 像素 */
  20.  
  21.             /* transform-origin: 80px 80px;         */
  22.  
  23.              /* transform-origin: top left; */
  24.  
  25.             transform-origin: bottom right ;
  26.  
  27.         }
  28.  
  29.         
  30.  
  31.         div:hover {
  32.  
  33.             transform: rotate(360deg);
  34.  
  35.         }
  1. Caso
  1.          div {
  2.  
  3.             overflow: hidden;
  4.  
  5.             width: 200px;
  6.  
  7.             height: 200px;
  8.  
  9.             border: 1px solid pink;
  10.  
  11.             margin: 10px;
  12.  
  13.             float: left;
  14.  
  15.         } 
  16.  
  17.         div::before {
  18.  
  19.             content: "小猪佩奇";
  20.  
  21.             display: block;
  22.  
  23.             width: 100%;
  24.  
  25.             height: 100%;
  26.  
  27.             background-image: url("./media/pig.jpg");          
  28.  
  29.             transform: rotate(180deg);
  30.  
  31.             transform-origin: left bottom;
  32.  
  33.             transition: all 0.4s;
  34.  
  35.         }
  36.  
  37.         /* 鼠标经过div 里面的before 复原 */
  38.  
  39.         
  40.  
  41.         div:hover::before {
  42.  
  43.             transform: rotate(0deg);
  44.  
  45.         }
  46.  
  47.     </style>
  48.  
  49. </head>
  50.  
  51.  
  52. <body>
  53.  
  54.     <div></div>
  55.  
  56.     <div></div>
  57.  
  58.     <div></div>
  1. Zoom: escala
1. Uso
  1.          div {
  2.  
  3.             width: 200px;
  4.  
  5.             height: 200px;
  6.  
  7.             background-color: pink;
  8.  
  9.             margin: 100px auto;
  10.  
  11.             /* transform-origin: left bottom; */
  12.  
  13.         }
  14.  
  15.         
  16.  
  17.         div:hover {
  18.  
  19.             /* 1. 里面写的数字不跟单位 就是倍数的意思 1 就是1倍  2就是 2倍 */
  20.  
  21.             /* transform: scale(x, y); */
  22.  
  23.             /* transform: scale(2, 2); */
  24.  
  25.             /* 2. 修改了宽度为原来的2倍  高度 不变 */
  26.  
  27.             /* transform: scale(2, 1); */
  28.  
  29.             /* 3. 等比例缩放 同时修改宽度和高度，我们有简单的写法  以下是 宽度修改了2倍，高度默认和第一个参数一样*/
  30.  
  31.             /* transform: scale(2); */
  32.  
  33.             /* 4. 我们可以进行缩小  小于1 就是缩放 */
  34.  
  35.             /* transform: scale(0.5, 0.5); */
  36.  
  37.             /* transform: scale(0.5); */
  38.  
  39.             /* 5. scale 的优势之处： 不会影响其他的盒子 而且可以设置缩放的中心点*/
  40.  
  41.             /* width: 300px;
  42.  
  43.             height: 300px; */
  44.  
  45.             transform: scale(2);
  46.  
  47.         }
  48.  
  49.     </style>
  50.  
  51. </head>
  52.  
  53.  
  54. <body>
  55.  
  56.     <div></div>
  57.  
  58.     123123
2. Estuche con botones
  1.  li {
  2.  
  3.             float: left;
  4.  
  5.             width: 30px;
  6.  
  7.             height: 30px;
  8.  
  9.             border: 1px solid pink;
  10.  
  11.             margin: 10px;
  12.  
  13.             text-align: center;
  14.  
  15.             line-height: 30px;
  16.  
  17.             list-style: none;
  18.  
  19.             border-radius: 50%;
  20.  
  21.             /* 小手 */
  22.  
  23.             cursor: pointer;
  24.  
  25.             transition: all .4s;
  26.  
  27.         }
  28.  
  29.         
  30.  
  31.         li:hover {
  32.  
  33.             transform: scale(1.2);
  34.  
  35.         }
  36.  
  37.     </style>
  38.  
  39. </head>
  40.  
  41.  
  42. <body>
  43.  
  44.     <ul>
  45.  
  46.         <li>1</li>
  47.  
  48.         <li>2</li>
  49.  
  50.         <li>3</li>
  51.  
  52.         <li>4</li>
  53.  
  54.         <li>5</li>
  55.  
  56.         <li>6</li>
  57.  
  58.         <li>7</li>
  59.  
  60.     </ul>
3. Casos integrales
  1.       div {
  2.  
  3.             width: 200px;
  4.  
  5.             height: 200px;
  6.  
  7.             background-color: pink;
  8.  
  9.             transition: all .5s;
  10.  
  11.         }
  12.  
  13.         
  14.  
  15.         div:hover {
  16.  
  17.             /* transform: rotate(180deg) translate(150px, 50px); */
  18.  
  19.             /* 我们同时有位移和其他属性，我们需要把位移放到最前面 */
  20.  
  21.             transform: translate(150px, 50px) rotate(180deg) scale(1.2);
  22.  
  23.         }

dos.animación

La animación se divide en dos pasos:

1. Primero defina la animación

2. Reutilizar animación (llamada)

1. Utilice fotogramas clave para definir animaciones (similar a definir selectores de clases)

@keyframes nombre de la animación{

0%{

ancho: 100px;

}

100%{

ancho: 200 px;

}

}

2. Utilice animación para elementos.

división {

ancho: 200 px; alto: 200 px; color de fondo: aguamarina; margen: 100 px automático;

/*Animación de llamada*/

nombre-animación: nombre de la animación;

/*duración*/

duración de la animación: duración;

1. Animación sencilla

  1.         /* 我们想页面一打开，一个盒子就从左边走到右边 */
  2.  
  3.         /* 1. 定义动画 */
  4.  
  5.         
  6.  
  7.         @keyframes move {
  8.  
  9.             /* 开始状态 */
  10.  
  11.             0% {transform: translateX(0px);}
  12.  
  13.             /* 结束状态 */
  14.  
  15.             100% {transform: translateX(1000px);}
  16.  
  17.         }  
  18.  
  19.         div {
  20.  
  21.             width: 200px;
  22.  
  23.             height: 200px;
  24.  
  25.             background-color: pink;
  26.  
  27.             /* 2. 调用动画 */
  28.  
  29.             /* 动画名称 */
  30.  
  31.             animation-name: move;
  32.  
  33.             /* 持续时间 */
  34.  
  35.             animation-duration: 2s;
  36.  
  37.         }

2. Secuencias de animación

  1.  /* from to 等价于  0% 和  100% */
  2.  
  3.         /* @keyframes move {
  4.  
  5.             from {
  6.  
  7.                 transform: translate(0, 0);
  8.  
  9.             }
  10.  
  11.             to {
  12.  
  13.                 transform: translate(1000px, 0);
  14.  
  15.             }
  16.  
  17.         } */
  18.  
  19.         /* 动画序列 */
  20.  
  21.         /* 1. 可以做多个状态的变化 keyframe 关键帧 */
  22.  
  23.         /* 2. 里面的百分比要是整数 */
  24.  
  25.         /* 3. 里面的百分比就是 总的时间（我们这个案例10s）的划分 25% * 10  =  2.5s */
  26.  
  27.         
  28.  
  29.         @keyframes move {
  30.  
  31.             0% {
  32.  
  33.                 transform: translate(0, 0);
  34.  
  35.             }
  36.  
  37.             25% {
  38.  
  39.                 transform: translate(1000px, 0)
  40.  
  41.             }
  42.  
  43.             50% {
  44.  
  45.                 transform: translate(1000px, 500px);
  46.  
  47.             }
  48.  
  49.             75% {
  50.  
  51.                 transform: translate(0, 500px);
  52.  
  53.             }
  54.  
  55.             100% {
  56.  
  57.                 transform: translate(0, 0);
  58.  
  59.             }
  60.  
  61.         }
  62.  
  63.         
  64.  
  65.         div {
  66.  
  67.             width: 100px;
  68.  
  69.             height: 100px;
  70.  
  71.             background-color: pink;
  72.  
  73.             animation-name: move;
  74.  
  75.             animation-duration: 10s;
  76.  
  77.         }

3. Propiedades de animación

Atributos

         describir

@fotogramas clave

Especificar animación

animación

Propiedad abreviada para todas las propiedades de animación.

nombre-de-animacion

Especifica el nombre de la animación @keyframes (obligatorio)

duración de la animación

Especifica los segundos o milisegundos que tarda la animación en completar un ciclo. El valor predeterminado es 0. (necesario)

función de temporización de animación

Especifica la curva de velocidad de la animación, el valor predeterminado es "facilidad"

Retraso de animación

Especifica cuándo comienza la animación, el valor predeterminado es 0

recuento de iteraciones de la animación

Especifica el número de veces que se reproduce la animación, el valor predeterminado es 1 e infinito

dirección de animación

Especifica si la animación se reproducirá al revés en el siguiente ciclo. El valor predeterminado es "normal", la alternativa se reproduce al revés.

estado de reproducción de animación

Especifica si la animación se está ejecutando o en pausa, el valor predeterminado es "en ejecución" y "pausa".

modo de relleno de animación

Especifique el estado después de que finalice la animación, continúe hacia adelante y regrese al inicio hacia atrás.

1.Uso básico
  1. @keyframes move {
  2.  
  3.             0% {
  4.  
  5.                 transform: translate(0, 0);
  6.  
  7.             }
  8.  
  9.             100% {
  10.  
  11.                 transform: translate(1000px, 0);
  12.  
  13.             }
  14.  
  15.         }
  16.  
  17.         
  18.  
  19.         div {
  20.  
  21.             width: 100px;
  22.  
  23.             height: 100px;
  24.  
  25.             background-color: pink;
  26.  
  27.             /* 动画名称 */
  28.  
  29.             animation-name: move;
  30.  
  31.             /* 持续时间 */
  32.  
  33.             animation-duration: 2s;
  34.  
  35.             /* 运动曲线 */
  36.  
  37.             /* animation-timing-function: ease; */
  38.  
  39.             /* 何时开始 */
  40.  
  41.             animation-delay: 2s;
  42.  
  43.             /* 重复次数  iteration 重复的 conut 次数  infinite  无限 */
  44.  
  45.             /* animation-iteration-count: infinite; */
  46.  
  47.             /* 是否反方向播放 默认的是 normal  如果想要反方向 就写 alternate */
  48.  
  49.             /* animation-direction: alternate; */
  50.  
  51.             /* 动画结束后的状态 默认的是 backwards  回到起始状态 我们可以让他停留在结束状态 forwards */
  52.  
  53.             /* animation-fill-mode: forwards; */
  54.  
  55.             /* animation: name duration timing-function delay iteration-count direction fill-mode; */
  56.  
  57.             /* animation: move 2s linear 0s 1 alternate forwards; */
  58.  
  59.             /* 前面2个属性 name  duration 一定要写 */
  60.  
  61.             /* animation: move 2s linear  alternate forwards; */
  62.  
  63.         }
  64.  
  65.         
  66.  
  67.         div:hover {
  68.  
  69.             /* 鼠标经过div 让这个div 停止动画，鼠标离开就继续动画 */
  70.  
  71.             animation-play-state: paused;
  72.  
  73.         }
2. Mapa de calor de big data
  1.  body {
  2.  
  3.             background-color: #333;
  4.  
  5.         }
  6.  
  7.         
  8.  
  9.         .map {
  10.  
  11.             position: relative;
  12.  
  13.             width: 747px;
  14.  
  15.             height: 616px;
  16.  
  17.             background: url(media/map.png) no-repeat;
  18.  
  19.             margin: 0 auto;
  20.  
  21.         }
  22.  
  23.         
  24.  
  25.         .city {
  26.  
  27.             position: absolute;
  28.  
  29.             top: 227px;
  30.  
  31.             right: 193px;
  32.  
  33.             color: #fff;
  34.  
  35.         }
  36.  
  37.         
  38.  
  39.         .tb {
  40.  
  41.             top: 500px;
  42.  
  43.             right: 80px;
  44.  
  45.         }
  46.  
  47.         
  48.  
  49.         .dotted {
  50.  
  51.             width: 8px;
  52.  
  53.             height: 8px;
  54.  
  55.             background-color: #09f;
  56.  
  57.             border-radius: 50%;
  58.  
  59.         }
  60.  
  61.         
  62.  
  63.         .city div[class^="pulse"] {
  64.  
  65.             /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
  66.  
  67.             position: absolute;
  68.  
  69.             top: 50%;
  70.  
  71.             left: 50%;
  72.  
  73.             transform: translate(-50%, -50%);
  74.  
  75.             width: 8px;
  76.  
  77.             height: 8px;
  78.  
  79.             box-shadow: 0 0 12px #009dfd;
  80.  
  81.             border-radius: 50%;
  82.  
  83.             animation: pulse 1.2s linear infinite;
  84.  
  85.         }
  86.  
  87.         .city div.pulse2 {
  88.  
  89.             animation-delay: 0.4s;
  90.  
  91.         }
  92.  
  93.         
  94.  
  95.         .city div.pulse3 {
  96.  
  97.             animation-delay: 0.8s;
  98.  
  99.         }
  100.  
  101.         
  102.  
  103.         @keyframes pulse {
  104.  
  105.             0% {}
  106.  
  107.             70% {
  108.  
  109.                 /* transform: scale(5);  我们不要用scale 因为他会让 阴影变大*/
  110.  
  111.                 width: 40px;
  112.  
  113.                 height: 40px;
  114.  
  115.                 opacity: 1;
  116.  
  117.             }
  118.  
  119.             100% {
  120.  
  121.                 width: 70px;
  122.  
  123.                 height: 70px;
  124.  
  125.                 opacity: 0;
  126.  
  127.             }
  128.  
  129.         }
  130.  
  131.     </style>
  132.  
  133. </head>
  134.  
  135.  
  136. <body>
  137.  
  138.     <div class="map">
  139.  
  140.         <div class="city">
  141.  
  142.             <div class="dotted"></div>
  143.  
  144.             <div class="pulse1"></div>
  145.  
  146.             <div class="pulse2"></div>
  147.  
  148.             <div class="pulse3"></div>
  149.  
  150.         </div>
  151.  
  152.         <div class="city tb">
  153.  
  154.             <div class="dotted"></div>
  155.  
  156.             <div class="pulse1"></div>
  157.  
  158.             <div class="pulse2"></div>
  159.  
  160.             <div class="pulse3"></div>
  161.  
  162.         </div>
  163.  
  164.     </div>

1.Efecto de impresión de texto
  1.   div {
  2.  
  3.             overflow: hidden;
  4.  
  5.             font-size: 20px;
  6.  
  7.             width: 0;
  8.  
  9.             height: 30px;
  10.  
  11.             background-color: pink;
  12.  
  13.             /* 让我们的文字强制一行内显示 */
  14.  
  15.             white-space: nowrap;
  16.  
  17.             /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
  18.  
  19.             animation: w 4s steps(10) forwards;
  20.  
  21.         }
  22.  
  23.         
  24.  
  25.         @keyframes w {
  26.  
  27.             0% {
  28.  
  29.                 width: 0;
  30.  
  31.             }
  32.  
  33.             100% {
  34.  
  35.                 width: 200px;
  36.  
  37.             }
  38.  
  39.         }
  40.  
  41.     </style>
  42.  
  43. </head>
  44.  
  45.  
  46. <body>
  47.  
  48.     <div>世纪佳缘我在这里等你</div>
2. Oso corriendo
  1.   body {
  2.  
  3.             background-color: #ccc;
  4.  
  5.         }
  6.  
  7.         
  8.  
  9.         div {
  10.  
  11.             position: absolute;
  12.  
  13.             width: 200px;
  14.  
  15.             height: 100px;
  16.  
  17.             background: url(media/bear.png) no-repeat;
  18.  
  19.             /* 我们元素可以添加多个动画， 用逗号分隔 */
  20.  
  21.             animation: bear .6s steps(8) infinite, move 4s forwards;
  22.  
  23.         }
  24.  
  25.         
  26.  
  27.         @keyframes bear {
  28.  
  29.             0% {
  30.  
  31.                 background-position: 0 0;
  32.  
  33.             }
  34.  
  35.             100% {
  36.  
  37.                 background-position: -1600px 0;
  38.  
  39.             }
  40.  
  41.         }
  42.  
  43.         
  44.  
  45.         @keyframes move {
  46.  
  47.             0% {
  48.  
  49.                 left: 0;
  50.  
  51.             }
  52.  
  53.             100% {
  54.  
  55.                 left: 50%;
  56.  
  57.                 /* margin-left: -100px; */
  58.  
  59.                 transform: translateX(-50%);
  60.  
  61.             }
  62.  
  63.         }
  64.  
  65.     </style>
  66.  
  67. </head>
  68.  
  69.  
  70. <body>
  71.  
  72.     <div></div>

3. Conversión 3D

El sistema de coordenadas tridimensionales en realidad se refiere al espacio tridimensional, que se compone de tres ejes.

·Eje x: Horizontalmente hacia la derecha Nota: El lado derecho de X es un valor positivo y el lado izquierdo es un valor negativo

·Eje y: verticalmente hacia abajo. Nota: la parte inferior de y es un valor positivo y la parte superior es un valor negativo.

·Eje Z: Pantalla vertical Nota: Valores positivos hacia el exterior y valores negativos hacia el interior

1.3D desplazamiento traducir3d(x,y,z)

traducir:translateX(100px): simplemente muévete en el eje x

traducir:translateY (100px): simplemente muévase en el eje Y

translform:translateZ (100px): simplemente muévase en el eje z (nota: traducirZ generalmente está en unidades px) transform:translate3d (x, y,): donde x, y y z respectivamente se refieren a la distancia en la dirección de el eje a mover.

  1.  body {
  2.  
  3.             /* 透视写到被观察元素的父盒子上面 */
  4.  
  5.             perspective: 200px;
  6.  
  7.         }
  8.  
  9.         
  10.  
  11.         div {
  12.  
  13.             width: 200px;
  14.  
  15.             height: 200px;
  16.  
  17.             background-color: pink;
  18.  
  19.             /* transform: translateX(100px);
  20.  
  21.             transform: translateY(100px); */
  22.  
  23.             /* transform: translateX(100px) translateY(100px) translateZ(100px); */
  24.  
  25.             /* 1. translateZ 沿着Z轴移动 */
  26.  
  27.             /* 2. translateZ 后面的单位我们一般跟px */
  28.  
  29.             /* 3. translateZ(100px) 向外移动100px （向我们的眼睛来移动的） */
  30.  
  31.             /* 4. 3D移动有简写的方法 */
  32.  
  33.             /* transform: translate3d(x,y,z); */
  34.  
  35.             /* transform: translate3d(100px, 100px, 100px); */
  36.  
  37.             /* 5. xyz是不能省略的，如果没有就写0 */
  38.  
  39.             transform: translate3d(200px, 100px, 100px);
  40.  
  41.         }
  1. perspectivaperspectiva
  1.   body {
  2.  
  3.             perspective: 600px;
  4.  
  5.             /* 透视写到被观擦元素的父盒子上面 */
  6.  
  7.         }
  8.  
  9.         
  10.  
  11.         div {
  12.  
  13.             width: 200px;
  14.  
  15.             height: 200px;
  16.  
  17.             background-color: pink;
  18.  
  19.             margin: 100px auto;
  20.  
  21.             transform: translateZ(0);
  22.  
  23.         }
  24.  
  25.     </style>
  26.  
  27. </head>
  28.  
  29.  
  30. <body>
  31.  
  32.     <div></div>
  33.  
  34.     <div></div>
  35.  
  36.     <div></div>
  37.  
  38. </body>

3.3 Rotar 3D

  1. body {
  2.  
  3.             perspective: 300px;
  4.  
  5.         }
  6.  
  7.         
  8.  
  9.         img {
  10.  
  11.             display: block;
  12.  
  13.             margin: 100px auto;
  14.  
  15.             transition: all 1s;
  16.  
  17.         }
  18.  
  19.         
  20.  
  21.         img:hover {
  22.  
  23.             transform: rotateX(45deg);
  24.  
  25.         }
  26.  
  27.     </style>
  28.  
  29. </head>
  30.  
  31.  
  32. <body>
  33.  
  34.     <img src="media/pig.jpg" alt="">
  35.  
  36.  
  37.   body {
  38.  
  39.             perspective: 500px;
  40.  
  41.         }
  42.  
  43.         
  44.  
  45.         img {
  46.  
  47.             display: block;
  48.  
  49.             margin: 100px auto;
  50.  
  51.             transition: all 1s;
  52.  
  53.         }
  54.  
  55.         
  56.  
  57.         img:hover {
  58.  
  59.             /* transform: rotateZ(180deg); */
  60.  
  61.             /* transform: rotate3d(x,y,z,deg); */
  62.  
  63.             /* transform: rotate3d(1, 0, 0, 45deg); */
  64.  
  65.             /* transform: rotate3d(0, 1, 0, 45deg); */
  66.  
  67.             transform: rotate3d(1, 1, 0, 45deg);
  68.  
  69.         }
  70.  
  71.     </style>
  72.  
  73. </head>
  74.  
  75.  
  76. <body>
  77.  
  78.     <img src="media/pig.jpg" alt="">

Estilo de transformación de renderizado 4.3D

·Controlar si el elemento hijo activa el entorno tridimensional. .

·Estilo de transformación: el subelemento plano no habilita el espacio 3D de forma predeterminada

·Transform-style:preserve-3d; el subelemento abre un espacio tridimensional.

·El código se escribe en el cuadro principal, pero afecta al cuadro secundario.

  1.       body {
  2.  
  3.             perspective: 500px;
  4.  
  5.         }
  6.  
  7.         
  8.  
  9.         .box {
  10.  
  11.             position: relative;
  12.  
  13.             width: 200px;
  14.  
  15.             height: 200px;
  16.  
  17.             margin: 100px auto;
  18.  
  19.             transition: all 2s;
  20.  
  21.             /* 让子元素保持3d立体空间环境 */
  22.  
  23.             transform-style: preserve-3d;
  24.  
  25.         }
  26.  
  27.         
  28.  
  29.         .box:hover {
  30.  
  31.             transform: rotateY(60deg);
  32.  
  33.         }
  34.  
  35.         
  36.  
  37.         .box div {
  38.  
  39.             position: absolute;
  40.  
  41.             top: 0;
  42.  
  43.             left: 0;
  44.  
  45.             width: 100%;
  46.  
  47.             height: 100%;
  48.  
  49.             background-color: pink;
  50.  
  51.         }
  52.  
  53.         
  54.  
  55.         .box div:last-child {
  56.  
  57.             background-color: purple;
  58.  
  59.             transform: rotateX(60deg);
  60.  
  61.         }
  62.  
  63.     </style>
  64.  
  65. </head>
  66.  
  67.  
  68. <body>
  69.  
  70.     <div class="box">
  71.  
  72.         <div></div>
  73.  
  74.         <div></div>
  75.  
  76.     </div>
  1. Reversión de ambos lados

1. Construya una estructura HTML

<div class="box">

<div class="front">Programador caballo oscuro</div>

<div class="back">La maestra rosa te está esperando.</div>

</div>

·El cuadro principal contiene dos cuadros secundarios antes y después.

·La caja es una caja volteada, el frente es la caja frontal y la parte posterior es la caja posterior.

  1. body {
  2.  
  3.             perspective: 400px;
  4.  
  5.         } 
  6.  
  7.         .box {
  8.  
  9.             position: relative;
  10.  
  11.             width: 300px;
  12.  
  13.             height: 300px;
  14.  
  15.             margin: 100px auto;
  16.  
  17.             transition: all .4s;
  18.  
  19.             /* 让背面的紫色盒子保留立体空间 给父级添加的 */
  20.  
  21.             transform-style: preserve-3d;
  22.  
  23.         }
  24.  
  25.         
  26.  
  27.         .box:hover {
  28.  
  29.             transform: rotateY(180deg);
  30.  
  31.         }
  32.  
  33.         
  34.  
  35.         .front,
  36.  
  37.         .back {
  38.  
  39.             position: absolute;
  40.  
  41.             top: 0;
  42.  
  43.             left: 0;
  44.  
  45.             width: 100%;
  46.  
  47.             height: 100%;
  48.  
  49.             border-radius: 50%;
  50.  
  51.             font-size: 30px;
  52.  
  53.             color: #fff;
  54.  
  55.             text-align: center;
  56.  
  57.             line-height: 300px;
  58.  
  59.         }
  60.  
  61.         .front {
  62.  
  63.             background-color: pink;
  64.  
  65.             z-index: 1;
  66.  
  67.         }
  68.  
  69.         
  70.  
  71.         .back {
  72.  
  73.             background-color: purple;
  74.  
  75.             /* 像手机一样 背靠背 旋转 */
  76.  
  77.             transform: rotateY(180deg);
  78.  
  79.         }
  80.  
  81.     </style>
  82.  
  83. </head>
  84.  
  85.  
  86. <body>
  87.  
  88.     <div class="box">
  89.  
  90.         <div class="front">黑马程序员</div>
  91.  
  92.         <div class="back">pink老师这里等你</div>
  93.  
  94.     </div>
  1. Caso de navegación de rotación
  1.   * {
  2.  
  3.             margin: 0;
  4.  
  5.             padding: 0;
  6.  
  7.         }
  8.  
  9.         
  10.  
  11.         ul {
  12.  
  13.             margin: 100px;
  14.  
  15.         }
  16.  
  17.         
  18.  
  19.         ul li {
  20.  
  21.             float: left;
  22.  
  23.             margin: 0 5px;
  24.  
  25.             width: 120px;
  26.  
  27.             height: 35px;
  28.  
  29.             list-style: none;
  30.  
  31.             /* 一会我们需要给box 旋转 也需要透视 干脆给li加 里面的子盒子都有透视效果 */
  32.  
  33.             perspective: 500px;
  34.  
  35.         }
  36.  
  37.         
  38.  
  39.         .box {
  40.  
  41.             position: relative;
  42.  
  43.             width: 100%;
  44.  
  45.             height: 100%;
  46.  
  47.             transform-style: preserve-3d;
  48.  
  49.             transition: all .4s;
  50.  
  51.         }
  52.  
  53.         
  54.  
  55.         .box:hover {
  56.  
  57.             transform: rotateX(90deg);
  58.  
  59.         }
  60.  
  61.         
  62.  
  63.         .front,
  64.  
  65.         .bottom {
  66.  
  67.             position: absolute;
  68.  
  69.             left: 0;
  70.  
  71.             top: 0;
  72.  
  73.             width: 100%;
  74.  
  75.             height: 100%;
  76.  
  77.         }
  78.  
  79.         
  80.  
  81.         .front {
  82.  
  83.             background-color: pink;
  84.  
  85.             z-index: 1;
  86.  
  87.             transform: translateZ(17.5px);
  88.  
  89.         }
  90.  
  91.         
  92.  
  93.         .bottom {
  94.  
  95.             background-color: purple;
  96.  
  97.             /* 这个x轴一定是负值 */
  98.  
  99.             /* 我们如果有移动 或者其他样式，必须先写我们的移动 */
  100.  
  101.             transform: translateY(17.5px) rotateX(-90deg);
  102.  
  103.         }
  104.  
  105.     </style>
  106.  
  107. </head>
  108.  
  109.  
  110. <body>
  111.  
  112.     <ul>
  113.  
  114.         <li>
  115.  
  116.             <div class="box">
  117.  
  118.                 <div class="front">黑马程序员</div>
  119.  
  120.                 <div class="bottom">pink老师等你</div>
  121.  
  122.             </div>
  123.  
  124.         </li>
  125.  
  126.         <li>
  127.  
  128.             <div class="box">
  129.  
  130.                 <div class="front">黑马程序员</div>
  131.  
  132.                 <div class="bottom">pink老师等你</div>
  133.  
  134.             </div>
  135.  
  136.         </li>
  137.  
  138.         <li>
  139.  
  140.             <div class="box">
  141.  
  142.                 <div class="front">黑马程序员</div>
  143.  
  144.                 <div class="bottom">pink老师等你</div>
  145.  
  146.             </div>
  147.  
  148.         </li>
  149.  
  150.         <li>
  151.  
  152.             <div class="box">
  153.  
  154.                 <div class="front">黑马程序员</div>
  155.  
  156.                 <div class="bottom">pink老师等你</div>
  157.  
  158.             </div>
  159.  
  160.         </li>
  161.  
  162.         <li>
  163.  
  164.             <div class="box">
  165.  
  166.                 <div class="front">黑马程序员</div>
  167.  
  168.                 <div class="bottom">pink老师等你</div>
  169.  
  170.             </div>
  171.  
  172.         </li>
  173.  
  174.         <li>
  175.  
  176.             <div class="box">
  177.  
  178.                 <div class="front">黑马程序员</div>
  179.  
  180.                 <div class="bottom">pink老师等你</div>
  181.  
  182.             </div>
  183.  
  184.         </li>
  185.  
  186.     </ul>
  1. carrusel
  1.   body {
  2.  
  3.             perspective: 1000px;
  4.  
  5.         }
  6.  
  7.         
  8.  
  9.         section {
  10.  
  11.             position: relative;
  12.  
  13.             width: 300px;
  14.  
  15.             height: 200px;
  16.  
  17.             margin: 150px auto;
  18.  
  19.             transform-style: preserve-3d;
  20.  
  21.             /* 添加动画效果 */
  22.  
  23.             animation: rotate 10s linear infinite;
  24.  
  25.             background: url(media/pig.jpg) no-repeat;
  26.  
  27.         }
  28.  
  29.         
  30.  
  31.         section:hover {
  32.  
  33.             /* 鼠标放入section 停止动画 */
  34.  
  35.             animation-play-state: paused;
  36.  
  37.         }
  38.  
  39.         
  40.  
  41.         @keyframes rotate {
  42.  
  43.             0% {
  44.  
  45.                 transform: rotateY(0);
  46.  
  47.             }
  48.  
  49.             100% {
  50.  
  51.                 transform: rotateY(360deg);
  52.  
  53.             }
  54.  
  55.         }
  56.  
  57.         
  58.  
  59.         section div {
  60.  
  61.             position: absolute;
  62.  
  63.             top: 0;
  64.  
  65.             left: 0;
  66.  
  67.             width: 100%;
  68.  
  69.             height: 100%;
  70.  
  71.             background: url(media/dog.jpg) no-repeat;
  72.  
  73.         }
  74.  
  75.         /* 正对着的图片 z轴*/
  76.  
  77.         section div:nth-child(1) {
  78.  
  79.             transform: rotateY(0) translateZ(300px);
  80.  
  81.         }
  82.  
  83.         /* 右边的图片 */
  84.  
  85.         section div:nth-child(2) {
  86.  
  87.             /* 先旋转好了再 移动距离 */
  88.  
  89.             transform: rotateY(60deg) translateZ(300px);
  90.  
  91.         }
  92.  
  93.         
  94.  
  95.         section div:nth-child(3) {
  96.  
  97.             /* 先旋转好了再 移动距离 */
  98.  
  99.             transform: rotateY(120deg) translateZ(300px);
  100.  
  101.         }
  102.  
  103.         
  104.  
  105.         section div:nth-child(4) {
  106.  
  107.             /* 先旋转好了再 移动距离 */
  108.  
  109.             transform: rotateY(180deg) translateZ(300px);
  110.  
  111.         }
  112.  
  113.         
  114.  
  115.         section div:nth-child(5) {
  116.  
  117.             /* 先旋转好了再 移动距离 */
  118.  
  119.             transform: rotateY(240deg) translateZ(300px);
  120.  
  121.         }
  122.  
  123.         
  124.  
  125.         section div:nth-child(6) {
  126.  
  127.             /* 先旋转好了再 移动距离 */
  128.  
  129.             transform: rotateY(300deg) translateZ(300px);
  130.  
  131.         }
  132.  
  133.     </style>
  134.  
  135. </head>
  136.  
  137.  
  138. <body>
  139.  
  140.     <section>
  141.  
  142.         <div></div>
  143.  
  144.         <div></div>
  145.  
  146.         <div></div>
  147.  
  148.         <div></div>
  149.  
  150.         <div></div>
  151.  
  152.         <div></div>
  153.  
  154.     </section>

4. Prefijo privado del navegador

-moz-: representa propiedades privadas del navegador Firefox

-ms-: representa los atributos privados del navegador IE

-webkit-: representa propiedades privadas de safari y chrome

-o-: representa propiedades privadas de Opera

2. El método de escritura defendido

-radio del borde moz: 10 px;

-radio del borde del webkit: 10 px;

-o-radio-del-borde：10px;radio-del-borde：10px；

Perfil personal

Se ha dedicado a la investigación de tecnología durante más de 30 años y domina varios lenguajes como java, linux, javascript, php, css, etc. Ha realizado muchas contribuciones en el campo del código abierto. Estación de documentación para desarrolladores para compartir algunos problemas en el desarrollo de tecnología para referencia futura.

Mi informacion de contacto

Correo