Condivisione della tecnologia

capitolo avanzato html

2024-07-12

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

Conversione 1.2D

La trasformazione può essere semplicemente intesa come deformazione

Mobile: traduci

Ruota: ruota

Zoom: scala

  1. Mobile: traduci
1.Spostare valori specifici
  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.Percentuale di movimento
  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. Ruota: ruota

1.Rotazione dell'immagine
  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. Piccolo triangolo
  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. Imposta il punto centrale di rotazione

1. Grammatica

origine-trasformazione:xy;

2. Punti chiave

·Notare che i seguenti parametri xey sono separati da spazi

·Il punto centrale della conversione predefinita xy è il punto centrale dell'elemento (50%50%)

·Puoi anche impostare pixel o nomi di orientamento per xy (in alto in basso a sinistra a destra al 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: scala
1. Utilizzo
  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. Custodia per bottoni
  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. Casi completi
  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.         }

due.animazione

La realizzazione dell'animazione è divisa in due fasi:

1. Definire prima l'animazione

2. Riutilizzare l'animazione (chiamata).

1. Utilizza i fotogrammi chiave per definire le animazioni (simile alla definizione dei selettori di classe)

@nome animazione fotogrammi chiave{

0%{

larghezza: 100px;

}

100%{

larghezza: 200px;

}

}

2. Usa l'animazione per gli elementi

dividi

larghezza：200px; altezza：200px; colore di sfondo: acquamarina; margine：100px auto;

/*Animazione della chiamata*/

nome-animazione: nome dell'animazione;

/*durata*/

durata-animazione: durata }

1. Animazione semplice

  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. Sequenze di animazione

  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. Proprietà dell'animazione

Attributi

         descrivere

@fotogrammi chiave

Specifica l'animazione

animazione

Proprietà abbreviata per tutte le proprietà di animazione

nome-animazione

Specifica il nome dell'animazione @keyframes (obbligatorio)

durata-animazione

Specifica i secondi o i millisecondi necessari all'animazione per completare un ciclo. Il valore predefinito è 0. (necessario)

funzione-temporizzazione-animazione

Specifica la curva di velocità dell'animazione, il valore predefinito è 'facilità'

ritardo animazione

Specifica quando inizia l'animazione, il valore predefinito è 0

conteggio-iterazione-animazione

Specifica il numero di volte in cui viene riprodotta l'animazione, il valore predefinito è 1 e infinito

direzione dell'animazione

Specifica se l'animazione verrà riprodotta all'indietro nel ciclo successivo. L'impostazione predefinita è 'normale', l'alternativa viene riprodotta all'indietro.

animazione-riproduzione-stato

Specifica se l'animazione è in esecuzione o in pausa, l'impostazione predefinita è "in esecuzione" e "pausa"

modalità-riempimento-animazione

Specifica lo stato al termine dell'animazione, continua in avanti e torna all'inizio all'indietro

1.Uso di base
  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. Mappa termica dei 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.Effetto di stampa del testo
  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. Orso che corre
  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. Conversione 3D

Il sistema di coordinate tridimensionale si riferisce in realtà allo spazio tridimensionale, che è composto da tre assi.

·asse x: orizzontalmente a destra Nota: il lato destro di X ha un valore positivo e il lato sinistro ha un valore negativo

·asse y: verticalmente verso il basso Nota: la parte inferiore di y è un valore positivo e la parte superiore è un valore negativo.

·Asse Z: schermo verticale Nota: valori positivi verso l'esterno e valori negativi verso l'interno

Spostamento 1.3D traslazione3d(x,y,z)

Translate:translateX(100px): spostati semplicemente sull'asse x

Translate:translateY (100px): basta spostarsi sull'asse Y

translform:translateZ (100px): basta spostarsi sull'asse z (nota: translateZ è generalmente in unità px) transform:translate3d (x, y,): dove x, y e z si riferiscono rispettivamente alla distanza nella direzione di l'asse da spostare.

  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. prospettivaprospettiva
  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.3Drotazione3d

  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="">

Stile di trasformazione del rendering 4.3D

·Controlla se l'elemento figlio attiva l'ambiente tridimensionale. .

·Stile di trasformazione: il sottoelemento piatto non abilita lo spazio 3D per impostazione predefinita

·Stile trasformazione:preserve-3d; il sottoelemento apre lo spazio tridimensionale

·Il codice viene scritto nel genitore, ma influisce sulla casella figlio

  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. Inversione di entrambi i lati

1. Costruisci la struttura HTML

<div class="box">

<div class="front">Programmatore cavallo oscuro</div>

<div class="back">La maestra Pink ti sta aspettando</div>

</div>

·La casella madre contiene due caselle figlie prima e dopo

·La scatola è una scatola capovolta, quella anteriore è quella anteriore e quella posteriore è quella posteriore.

  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. Custodia di navigazione a rotazione
  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. giostra
  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. Prefisso privato del browser

-moz-: rappresenta le proprietà private del browser Firefox

-ms-: rappresenta gli attributi privati ​​del browser IE

-webkit-: rappresenta le proprietà private di Safari e Chrome

-o-: rappresenta le proprietà private dell'Opera

2. Il metodo di scrittura consigliato

-moz-border-radius：10px;

-webkit-border-radius：10px;

-o-border-radius：10px;border-radius：10px;

Profilo personale

Si dedica alla ricerca tecnologica da più di 30 anni ed è esperto in vari linguaggi come Java, Linux, Javascript, php, css, ecc. Ha dato numerosi contributi nel campo dell'open source stazione di documentazione per gli sviluppatori per condividere alcuni problemi nello sviluppo della tecnologia per riferimento futuro

le mie informazioni di contatto

Posta