• css3 3d旋转案例：旋转木马

     

    实现步骤：

    1 搭建HTML结构

          

          

          

          

          

           

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         .far {
    11.             perspective: 1000px;
    12.         }
    13.  
    14.         section {
    15.             transform-style: preserve-3d;
    16.  
    17.             position: relative;
    18.             width: 200px;
    19.             margin: 100px auto;
    20.             animation: move 6s linear infinite;
    21.             background: url(images/gwm.jpg) no-repeat;
    22.         }
    23.  
    24.         section:hover {
    25.             animation-play-state: paused;
    26.         }
    27.  
    28.         section div {
    29.             top: 0;
    30.             left: 0;
    31.             position: absolute;
    32.         }
    33.  
    34.         section div:nth-child(1) {
    35.             transform: translateZ(300px);
    36.         }
    37.  
    38.         section div:nth-child(2) {
    39.             /* 先旋转好了，再移动 */
    40.             transform: rotatey(60deg) translatez(300px);
    41.         }
    42.  
    43.         section div:nth-child(3) {
    44.             transform: rotatey(120deg) translatez(300px);
    45.         }
    46.  
    47.         section div:nth-child(4) {
    48.             transform: rotatey(180deg) translatez(300px);
    49.         }
    50.  
    51.         section div:nth-child(5) {
    52.             transform: rotatey(240deg) translatez(300px);
    53.         }
    54.  
    55.         section div:nth-child(6) {
    56.             transform: rotatey(300deg) translatez(300px);
    57.         }
    58.  
    59.         img {
    60.             width: 200px;
    61.         }
    62.  
    63.         @keyframes move {
    64.             0% {
    65.                 transform: rotatey(0);
    66.             }
    67.  
    68.             100% {
    69.                 transform: rotatey(360deg);
    70.             }
    71.         }
    72.     style>
    73. head>
    74.  
    75. <body>
    76.     <div class="far">
    77.         <section>
    78.             <div><img src="images/gwm.jpg" alt="">div>
    79.             <div><img src="images/gwm.jpg" alt="">div>
    80.             <div><img src="images/gwm.jpg" alt="">div>
    81.             <div><img src="images/gwm.jpg" alt="">div>
    82.             <div><img src="images/gwm.jpg" alt="">div>
    83.             <div><img src="images/gwm.jpg" alt="">div>
    84.         section>
    85.     div>
    86. body>
    87.  
    88. html>

     

  • 相关阅读:
    Jenkins 采用API接口进行构建工程及错误解释（10）
    STM32 裸机编程 04 - Makefile 构建自动化
    TypeScript基础入门
    resources(static与templates)
    计算机硬件的读写速度差异
    Anaconda安装+Spyder Tensorflow环境配置
    第12集丨唯一的成圣之道
    集合的进阶
    【LeetCode】17. Longest Palindrome·最长回文串
    三大基础排序 -选择排序、冒泡排序、插入排序
  • 原文地址：https://blog.csdn.net/m0_51495354/article/details/128116967