zoukankan      html  css  js  c++  java
  • 用html标签+css写出旋转的正方体

    有一段时间没写代码了,刚写有点手生,无从下手,为了能快速进入状态,就写了这一个小东西,纯用标签和样式表写。下面看一下我写的。

    这一段是样式表:

      <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul,li{
                list-style: none;
            }
            ul{
                position: relative;
                top: 200px;
                left: 200px;
                width: 200px;
                height: 200px;
                transform-style: preserve-3d;
                transition: all 5s;
           transform:rotateX(-45deg) rotateY(-45deg);
    } ul:hover{ transform: rotateX(360deg) rotateY(360deg); } li{ position: absolute; width: 200px; height: 200px; border-radius: 20px; background-color: #222; } li:nth-child(1){ transform: translateZ(100px); background-color: red; } li:nth-child(2){ background-color: green; transform: translateZ(-100px); } li:nth-child(3){ background-color: silver; transform: rotateY(90deg) translateZ(-100px); } li:nth-child(4){ background-color: pink; transform: rotateY(90deg) translateZ(100px); } li:nth-child(5){ background-color: brown; transform: rotateX(90deg) translateZ(-100px); } li:nth-child(6){ background-color: yellow; transform: rotateX(90deg) translateZ(100px); } </style>

    这一段是HTML:

      <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

    对于这种毫无技术含量的,实在没脸。看一下效果:

    鼠标放在上面就会旋转,感兴趣的可以试一下,觉得low的多提意见,脸皮厚。

  • 相关阅读:
    ajax提交转码解码
    关于idea开发工具常用的快捷键
    oracle 查询某个时间段数据
    hibernate : object references an unsaved transient instance 问题
    log4j日志
    JS关键字 import
    代码正常,junit却报错原因及解决方法
    hdu 5868 Polya计数
    hdu 5893 (树链剖分+合并)
    hdu 5895 广义Fibonacci数列
  • 原文地址:https://www.cnblogs.com/bigharbour/p/11883352.html
Copyright © 2011-2022 走看看