Berbagi teknologi

html bab lanjutan

2024-07-12

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

Konversi 1.2D

Transformasi secara sederhana dapat dipahami sebagai deformasi

Seluler: terjemahkan

Putar: memutar

Zoom: skala

  1. Seluler: terjemahkan
1.Pindahkan nilai tertentu
  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. Persentase pergerakan
  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. Putar: memutar

1. Rotasi gambar
  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. Segitiga kecil
  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. Tetapkan titik pusat rotasi

1. Tata Bahasa

transformasi-asal:xy；

2. Poin-poin penting

·Perhatikan bahwa parameter x dan y berikut dipisahkan dengan spasi

·Titik tengah konversi default xy adalah titik tengah elemen (50%50%)

·Anda juga dapat mengatur piksel atau kata benda orientasi untuk xy (kiri bawah kanan tengah atas)

  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. Kasus
  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: skala
1. Penggunaan
  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. Kotak kancing
  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. Kasus yang komprehensif
  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.         }

dua.animasi

Pembuatan animasi dibagi menjadi dua langkah:

1. Definisikan animasi terlebih dahulu

2. Gunakan kembali (panggilan) animasi

1. Gunakan bingkai utama untuk menentukan animasi (mirip dengan menentukan pemilih kelas)

@nama animasi keyframes{

0%{

lebar：100px；

}

100%{

lebar：200px；

}

}

2. Gunakan animasi untuk elemen

membagi{

lebar：200px；tinggi：200px；warna latar:aqua；margin：100px otomatis；

/*Animasi panggilan*/

nama-animasi: nama animasi;

/*durasi*/

durasi animasi: durasi; }

1. Animasi sederhana

  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. Urutan Animasi

  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. Properti animasi

Atribut

         menggambarkan

@bingkai kunci

Tentukan animasi

animasi

Properti singkatan untuk semua properti animasi

nama-animasi

Menentukan nama animasi @keyframes (wajib)

durasi animasi

Menentukan detik atau milidetik yang diperlukan animasi untuk menyelesaikan satu siklus. (diperlukan)

fungsi pengaturan waktu animasi

Menentukan kurva kecepatan animasi, defaultnya adalah 'kemudahan'

penundaan animasi

Menentukan kapan animasi dimulai, defaultnya adalah 0

animasi-iterasi-hitung

Menentukan berapa kali animasi diputar, defaultnya adalah 1, dan tak terbatas

arah animasi

Menentukan apakah animasi akan diputar secara terbalik pada siklus berikutnya. Defaultnya adalah 'normal', alternatif diputar secara terbalik.

animasi-putar-status

Menentukan apakah animasi sedang berjalan atau dijeda, defaultnya adalah 'berjalan', dan 'jeda'

mode pengisian animasi

Tentukan keadaan setelah animasi berakhir, lanjutkan ke depan, dan kembali ke awal secara mundur

1. Penggunaan dasar
  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. Peta panas data besar
  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.Efek pencetakan teks
  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. Beruang Berlari
  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. Konversi 3D

Sistem koordinat tiga dimensi sebenarnya mengacu pada ruang tiga dimensi yang tersusun dari tiga sumbu.

· Sumbu x: Horizontal ke kanan Catatan: Sisi kanan X bernilai positif dan sisi kiri bernilai negatif

·sumbu y: vertikal ke bawah. Catatan: bagian bawah y bernilai positif dan bagian atas bernilai negatif.

·Sumbu Z: Layar vertikal Catatan: Nilai positif ke arah luar dan nilai negatif ke arah dalam

Terjemahan perpindahan 1.3D3d(x,y,z)

Translate:translateX(100px): Pindahkan saja pada sumbu x

Translate:translateY (100px): Cukup gerakkan pada sumbu Y

translform:translateZ (100px): Cukup gerakkan pada sumbu z (catatan: TranslateZ umumnya dalam satuan px) transform:translate3d (x, y,): dimana x, y, dan z masing-masing mengacu pada jarak ke arah sumbu yang akan dipindahkan.

  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. perspektifperspektif
  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.3Drotate3d

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

Gaya transformasi rendering 4.3D

·Kontrol apakah elemen anak mengaktifkan lingkungan tiga dimensi. .

·Gaya transformasi: sub-elemen datar tidak mengaktifkan ruang 3D secara default

·Transform-style:preserve-3d; sub-elemen membuka ruang tiga dimensi

·Kode ini ditulis ke induk, tetapi mempengaruhi kotak anak

  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. Pembalikan kedua sisi

1. Bangun struktur HTML

<div class="box">

<div class="front">Pemrogram Kuda Hitam</div>

<div class="back">Guru pink sedang menunggumu</div>

</div>

·Kotak induk berisi dua kotak anak sebelum dan sesudah

·Kotak adalah kotak terbalik, depan adalah kotak depan, dan belakang adalah kotak belakang.

  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. Kasus navigasi rotasi
  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. korsel
  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. Awalan pribadi browser

-moz-: mewakili properti pribadi browser firefox

-ms-: mewakili atribut pribadi browser IE

-webkit-: mewakili properti pribadi safari dan chrome

-o-: mewakili properti pribadi Opera

2. Metode penulisan yang dianjurkan

-moz-border-radius: 10px;

-radius-batas-webkit: 10px;

-o-radius-batas：10px；radius-batas：10px；

Profil pribadi

Ia telah mengabdikan dirinya untuk meneliti teknologi selama lebih dari 30 tahun, dan mahir dalam berbagai bahasa seperti java, linux, javascript, php, css, dll. Ia telah memberikan banyak kontribusi di bidang open source stasiun dokumentasi pengembang untuk berbagi beberapa masalah dalam pengembangan teknologi untuk referensi di masa mendatang

informasi kontak saya

Surat