Technology Sharing

Advanced HTML

2024-07-12

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

1.2D Conversion

Transformation can be simply understood as deformation.

Move: translate

Rotate: rotate

Zoom: sCale

  1. Move: translate
1. Move specific values
  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. Move Percent
  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. Rotate: rotate

1. Image rotation
  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. Small triangle
  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. Set the rotation center point

1. Grammar

transform-origin:xy；

2. Key Points

Note that the following parameters x and y are separated by spaces.

The default xy transformation center point is the center point of the element (50% 50%)

You can also set pixels or position nouns for xy (top bottom left right center)

  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. Case
  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: sCale
1. Usage
  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. Button Case
  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. Comprehensive Case
  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.         }

2. Animation

There are two steps to creating an animation:

1. Define the animation first

2. Reuse (call) animation

1. Define animations with keyframes (similar to defining class selectors)

@keyframes animation name {

0%{

width：100px；

}

100%{

width：200px；

}

}

2. Use animations for elements

div{

width：200px；height：200px；background-color:aqua；margin：100px auto；

/*Call animation*/

animation-name: animation name;

/*duration*/

animation-duration: duration;}

1. Simple Animation

  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. Animation Sequence

  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. Animation properties

Attributes

         describe

@keyframes

Prescribed animation

animation

Shorthand properties for all animation properties

animation-name

Specifies the name of the @keyframes animation (required)

animation-duration

Specifies the number of seconds or milliseconds it takes for the animation to complete a cycle. The default value is 0. (Required)

aniamtion-timing-function

Specifies the speed curve of the animation, the default is 'ease'

animation-delay

Specifies when the animation starts. The default value is 0.

animation-iteration-count

Specifies the number of times the animation is played. The default is 1, and there is infinite

animation-direction

Specifies whether the animation should be played in reverse in the next cycle. The default is 'normal', alternate plays in reverse

animation-play-state

Specifies whether the animation is running or paused. The default is 'running', and there is also 'pause'

animation-fill-mode

Specifies the state after the animation ends, keeps forwards, and returns to the starting backwards

1. Basic use
  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. Big Data Heat Map
  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. Text printing effect
  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. Running Big Bear
  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 Conversion

The three-dimensional coordinate system actually refers to three-dimensional space, which is composed of three axes.

x-axis: horizontal to the right Note: X is positive on the right and negative on the left

y-axis: vertically downward Note: positive values ​​are below y and negative values ​​are above y

z-axis: vertical to the screen Note: positive values ​​are toward the outside and negative values ​​are toward the inside

1.3D displacement translate3d(x,y,z)

Translform: translateX (100px): only moves on the x-axis

Translform: translateY (100px): only moves on the Y axis

transform:translateZ(100px): only moves on the z axis (note: translateZ is generally in px units) transform:translate3d(x, y,): where x, y, and z refer to the distance in the direction of the axis to be moved.

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

4.3D rendering transform-style

·Controls whether the sub-element opens the 3D environment.

· Transform-style: flat sub-element does not open the 3D space default

·transform-style:preserve-3d; child elements open three-dimensional space

Code is written to the parent, but affects the child boxes

  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. Double-sided reversal

1. Build HTML structure

<div class="box">

<div class="front">Dark Horse Programmer</div>

<div class="back">Teacher Pink is waiting for you</div>

</div>

The parent box contains two child boxes.

·box is the flipped box front is the front box back is the back box

  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. Rotary Navigation Example
  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. Carousel
  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. Browser private prefix

-moz-: represents the private properties of the Firefox browser

-ms-: represents the private properties of IE browser

-webkit-: represents Safari and Chrome private attributes

-o-: represents Opera private attributes

2. Recommended writing style

-moz-border-radius：10px；

-webkit-border-radius：10px；

-o-border-radius：10px；border-radius：10px；

Personal profile

I have devoted myself to the research of technology for more than 30 years. I am proficient in various languages ​​such as Java, Linux, JavaScript, PHP, CSS, etc. I have made many contributions in the field of open source. I have established a developer documentation site to share some problems in technology development for everyone to read.

my contact information

Mail