html實現3D骰子
阿新 • • 發佈：2019-02-01
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } body{ overflow: hidden; } .box{ list-style: none; width: 300px; height: 300px; position: relative; margin: 100px auto; transform-style: preserve-3d; transform: rotateX(-180deg) rotateY(-180deg); animation: rotate 2s linear 0s infinite normal; } @keyframes rotate{ 0%{ transform: rotateX(-180deg) rotateY(-180deg); } 100%{ transform: rotateX(180deg) rotateY(180deg); } } .box li{ position: absolute; left: 0; top: 0; width: 300px; height: 300px; line-height: 300px; text-align: center; font-size: 40px; color: #ffffff; } .box li:nth-child(1){ background: red; transform: translateZ(150px); } .box li:nth-child(2){ background: blue; transform: translateZ(-150px); } .box li:nth-child(3){ background: black; transform: translateX(-150px) rotateY(-90deg); } .box li:nth-child(4){ background: green; transform: translateX(150px) rotateY(90deg); } .box li:nth-child(5){ background: yellow; transform: translateY(-150px) rotateX(90deg); } .box li:nth-child(6){ background: pink; transform: translateY(150px) rotateX(-90deg); } </style> </head> <body> <ul class="box"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body> </html>