Giter VIP home page Giter VIP logo

xk's Introduction

<!doctype html>

<title>3D正方体</title> <style type="text/css"> body{ background:#000; } nav{ width:500px; height:500px; display:flex; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position:relative; top:300px; left:600px; perspective:50000px; animation:change 32s linear infinite alternate; /* transform:rotateX(89deg);*/ } nav:hover{ animation-play-state:paused; } @keyframes change{ form{} 50%{ transform:rotateX(360deg) rotateY(180deg) rotateZ(180deg); } 96%{ transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg); } to{ transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg); } } div{ width:500px; height:500px; position:absolute; top:0; left:0; opacity:0.5; } .before{ background:#0f0; background-size:cover; transform:translateZ(250px); } .later{ background:#00f; background-size:cover; transform:translateZ(-250px) rotateX(180deg); } .left{ background:#f00; background-size:cover; transform:translate(-250px) rotateY(90deg); } .right{ background:#ff0; background-size:cover; transform:translate(250px) rotateY(-90deg); } .top{ background:#f0f; background-size:cover; transform:translateY(250px) rotateX(90deg); } .bottom{ background:#0ff; background-size:cover; transform:translateY(-250px) rotateX(-90deg); } </style>

xk's People

Contributors

xue-k avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.