기술나눔

HTML 고급 장

2024-07-12

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

1.2D 변환

변형은 간단히 변형으로 이해될 수 있습니다.

모바일: 번역

회전하다: 회전하다

확대/축소: 규모

  1. 모바일: 번역
1. 특정 값 이동
  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.이동률
  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. 회전: 회전

1.사진 회전
  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. 작은 삼각형
  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. 회전 중심점 설정

1. 문법

변환-원점:xy；

2. 핵심사항

·다음 매개변수 x와 y는 공백으로 구분되어 있습니다.

·xy 기본 변환의 중심점이 요소의 중심점(50%50%)입니다.

·xy(상단 하단 왼쪽 오른쪽 중앙)에 대한 픽셀 또는 방향 명사를 설정할 수도 있습니다.

  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. 사례
  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. 확대/축소: 규모
1. 사용법
  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. 버튼 케이스
  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. 종합사례
  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.         }

둘.생기

애니메이션 제작은 두 단계로 나누어집니다.

1. 먼저 애니메이션 정의

2. (통화) 애니메이션 재사용

1. 키프레임을 사용하여 애니메이션 정의(클래스 선택기 정의와 유사)

@keyframes 애니메이션 이름{

0%{

너비：100px；

}

100%{

너비：200px；

}

}

2. 요소에 애니메이션을 사용하세요

div{

너비：200px；높이：200px；배경색: 아쿠아；여백：100px 자동；

/*통화 애니메이션*/

animation-name: 애니메이션 이름;

/*지속*/

애니메이션 기간: 기간 }

1. 간단한 애니메이션

  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. 애니메이션 시퀀스

  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. 애니메이션 속성

속성

         설명하다

@키프레임

애니메이션 지정

생기

모든 애니메이션 속성에 대한 단축 속성

애니메이션 이름

@keyframes 애니메이션의 이름을 지정합니다(필수).

애니메이션 지속시간

애니메이션이 한 주기를 완료하는 데 걸리는 시간(초 또는 밀리초)을 지정합니다. 기본값은 0입니다. (필요한)

애니메이션 타이밍 기능

애니메이션의 속도 곡선을 지정합니다. 기본값은 'ease'입니다.

애니메이션 지연

애니메이션이 시작되는 시기를 지정합니다. 기본값은 0입니다.

애니메이션 반복 횟수

애니메이션이 재생되는 횟수를 지정합니다. 기본값은 1이고 무한입니다.

애니메이션 연출

다음 주기에서 애니메이션을 역방향으로 재생할지 여부를 지정합니다. 기본값은 '일반'이고 교대로 역방향으로 재생됩니다.

애니메이션-재생-상태

애니메이션이 실행 중인지 일시 중지되었는지 지정합니다. 기본값은 '실행 중'이고 '일시 중지'입니다.

애니메이션-채우기-모드

애니메이션 종료 후 상태를 지정하고 앞으로 계속하고 뒤로 시작 부분으로 돌아갑니다.

1.기본 사용법
  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. 빅데이터 히트맵
  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.텍스트 인쇄 효과
  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. 달리는 곰
  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. 3D 변환

3차원 좌표계는 실제로 3개의 축으로 구성된 3차원 공간을 의미합니다.

·x축: 수평으로 오른쪽으로 주의: X의 오른쪽은 양수 값, 왼쪽은 음수 값

·y축: 수직 아래쪽 참고: y의 아래쪽은 양수 값이고 위쪽은 음수 값입니다.

·Z축 : 세로 화면 참고 : 바깥쪽으로 갈수록 양의 값, 안쪽으로 갈수록 음의 값

1.3D 변위 변환3d(x,y,z)

번역:translateX(100px): x축을 따라 이동하면 됩니다.

번역:번역Y(100px): Y축으로만 이동하세요.

translform:translateZ (100px): z축을 따라 이동하세요. (참고: translateZ는 일반적으로 px 단위입니다.) 변환:translate3d (x, y,): 여기서 x, y, z는 각각 방향의 거리를 나타냅니다. 이동할 축.

  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. 관점관점
  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 회전 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="">

4.3D 렌더링 변환 스타일

·하위 요소가 3차원 환경을 켤지 여부를 제어합니다. .

·변환 스타일: 평면 하위 요소는 기본적으로 3D 공간을 활성화하지 않습니다.

·Transform-style:preserve-3d 하위 요소는 3차원 공간을 엽니다.

·코드는 부모에게 작성되지만 자식 상자에는 영향을 미칩니다.

  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. 양면의 반전

1. HTML 구조 구축

<div class="box">

<div class="front">다크호스 프로그래머</div>

<div class="back">핑크 선생님이 당신을 기다리고 있어요</div>

</div>

·상자 상위 상자에는 전후에 두 개의 하위 상자가 포함되어 있습니다.

·박스는 뒤집힌 박스로 앞면이 앞면 박스, 뒷면이 뒷면 박스입니다.

  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. 회전 내비게이션 케이스
  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. 회전목마
  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. 브라우저 개인 접두사

-moz-: Firefox 브라우저 개인 속성을 나타냅니다.

-ms-: IE 브라우저 개인 속성을 나타냅니다.

-webkit-: Safari 및 Chrome 개인 속성을 나타냅니다.

-o-: Opera 사유 재산을 나타냅니다.

2. 주장하는 글쓰기 방식

-moz-border-radius：10px；

-웹킷-테두리-반경：10px；

-o-테두리 반경：10px；테두리 반경：10px；

개인 프로필

그는 30년 이상 기술 연구에 전념해 왔으며, java, linux, javascript, php, css 등 다양한 언어에 능숙하며, 오픈 소스 분야에서 많은 공헌을 했습니다. 나중에 참조할 수 있도록 기술 개발의 일부 문제를 공유하는 개발자 문서 스테이션입니다.

내 연락처 정보

우편