zoukankan      html  css  js  c++  java
  • 转动的魔方体

    代码:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8" />

    <title></title>

    <style type="text/css">

    *{

    padding: 0;

    margin: 0;

    height: 100%;

    }

    body{

    position: relative;

    perspective: 1000px;

    }
    .wrap{

    240px;

    height: 240px;

    position: absolute;

    top: 50%;

    left: 50%;

    margin-left: -120px;

    margin-top: -120px;

    transform-style: preserve-3d;

    transform: rotateX(45deg) rotateY(45deg);

    transition: all 100s linear;
    }

    .wrap:hover{

    transform: rotateX(10000deg) rotateY(10000deg);

    }

    .wrap div{

    240px;

    height: 240px;

    position: absolute;

    top: 0;

    left: 0;
    }

    img{

    100%;

    height: 100%;

    border-radius: 40px;

    opacity: 0.8;

    }

    .wrap div:nth-child(1){

    transform: rotateY(90deg) translateZ(120px);
    }

    .wrap div:nth-child(2){

    transform: rotateY(0deg) translateZ(120px);
    }

    .wrap div:nth-child(3){

    transform: rotateY(0deg) translateZ(-120px);
    }

    .wrap div:nth-child(4){

    transform: rotateY(90deg) translateZ(-120px);
    }

    .wrap div:nth-child(5){

    transform: rotateX(90deg) translateZ(120px);
    }

    .wrap div:nth-child(6){

    transform: rotateX(90deg) translateZ(-120px);
    }

    </style>

    </head>

    <body>

    <div class="wrap">

    <div><img src="2.jpg"/></div>

    <div><img src="3.jpg"/></div>

    <div><img src="4.jpg"/></div>

    <div><img src="5.jpg"/></div>

    <div><img src="6.jpg"/></div>

    <div><img src="1.jpg"/></div>
    </div>
    </body>

    </html>

    效果截图:

  • 相关阅读:
    JSP实现数据传递(web基础学习笔记三)
    Spring Boot 参数校验
    Spring AOP实践
    Spring AOP介绍
    2018年春节
    InnoDB索引
    Kafka基本知识回顾及复制
    Kakfa消息投递语义
    Kafka Consumer
    Kafka Producer Consumer
  • 原文地址:https://www.cnblogs.com/MissZhao/p/5746527.html
Copyright © 2011-2022 走看看