zoukankan      html  css  js  c++  java
  • 案例-3D旋转木马

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style>
          body {
            perspective: 1000px; /*给父级添加透视,因为section 需要旋转,所以给body加透视 */
          }
          @keyframes move {
            0% {
              transform: rotateY(0deg);
            }
            100% {
              transform: rotateY(360deg);
            }
          }
          section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 100px auto;
            transform-style: preserve-3d; /*给子元素添加动画效果*/
            animation: move 6s linear infinite;
          }
          section:hover {
            cursor: pointer;
            animation-play-state: paused; /*暂停动画*/
          }
          section div {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
          }
          div:nth-child(1) {
            background: coral;
            transform: translateZ(300px);
          }
          div:nth-child(2) {
            background: cadetblue;
            transform: rotateY(60deg) translateZ(300px);
          }
          div:nth-child(3) {
            background: pink;
            transform: rotateY(120deg) translateZ(300px);
          }
          div:nth-child(4) {
            background: peru;
            transform: rotateY(180deg) translateZ(300px);
          }
          div:nth-child(5) {
            background: plum;
            transform: rotateY(240deg) translateZ(300px);
          }
          div:nth-child(6) {
            background: palegreen;
            transform: rotateY(300deg) translateZ(300px);
          }
        </style>
      </head>
      <body>
        <section>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </section>
      </body>
    </html>
  • 相关阅读:
    上传和下载附件功能
    C#小常识,持续更新..
    动态添加HTML表单控件,无(runat="server")
    Excel技巧 持续更新..
    JS函数集锦 持续更新..
    JS 函数 检验输入是否为数字类型,正整数
    存储过程 游标 事例
    Sql 查询语句中的类型转换
    shell 计数脚本
    centos 获取文件的创建时间
  • 原文地址:https://www.cnblogs.com/qtbb/p/11758006.html
Copyright © 2011-2022 走看看