CSS实现一个旋转的正方体,鼠标放上去会自动解体.比较普通的实现,留个记录.(代码里的注释方式写错了)

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .box {

            width: 600px;

            height: 600px;

            margin: 0 auto;

            transform-style: preserve-3d;

            position: relative;

            animation: run 5s linear infinite; //旋转动画

        }

        @keyframes run {

            0%{

               //旋转动画的开始帧

            }

            100%{

                transform: rotateY(360deg) rotateX(360deg);//旋转动画的结束帧

            }

        }

        div {

            transition:1s;//设置div变换的时间

        }

        .box div {

            width: 200px;

            height: 200px;

            position: absolute;

            left: 50%;

            top: 50%;

            margin-left: -100px;

            margin-top: -100px;

            line-height: 200px;

            text-align: center;

            font-size: 50px;

            color: whitesmoke;

            opacity: 0.5;//透明度

        }

        .box div:nth-child(1) {

            background: #F44336;

            transform: translateZ(100px);

        }

        .box div:nth-child(2) {

            background: #9C27B0;

            transform: translateX(-100px) rotateY(-90deg);

        }

        .box div:nth-child(3) {

            background: #3F51B5;

            transform: translateY(-100px) rotateX(90deg);

        }

        .box div:nth-child(4) {

            background: #4CAF50;

            transform: translateY(100px) rotateX(-90deg);

        }

        .box div:nth-child(5) {

            background: #FDD835;

            transform: translateX(100px) rotateY(90deg);

        }

        .box div:nth-child(6) {

            background: #455A64;

            transform: translateZ(-100px);

        }

    </style>

</head>

<body>

<div class="box" onmouseover="showsome()" onmouseout="goback()">

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

    <div>6</div>

</div>

</body>

<script>

function showsome(){

var divs =  document.getElementsByClassName('box')[0].children

 divs[0].style.transform='translateZ(200px) '

 divs[1].style.transform='translateX(-200px) rotateY(-90deg)'

 divs[2].style.transform='translateY(-200px) rotateX(90deg)'

 divs[3].style.transform='translateY(200px) rotateX(-90deg) '

 divs[4].style.transform='translateX(200px)  rotateY(90deg)'

 divs[5].style.transform='translateZ(-200px)'

}

function goback(){

var divs =  document.getElementsByClassName('box')[0].children

 divs[0].style.transform='translateZ(100px) '

 divs[1].style.transform='translateX(-100px) rotateY(-90deg)'

 divs[2].style.transform='translateY(-100px) rotateX(90deg)'

 divs[3].style.transform='translateY(100px) rotateX(-90deg) '

 divs[4].style.transform='translateX(100px)  rotateY(90deg)'

 divs[5].style.transform='translateZ(-100px)'

}

</script>

</html>

CSS旋转正方体的更多相关文章

  1. CSS实现正方体旋转

    代码如下: <!DOCTYPE html><html lang="en"><head>    <meta charset="UT ...

  2. JS旋转和css旋转

    js旋转 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <styl ...

  3. canvas星空背景特效+CSS旋转相册学习

    今天在看帖子的时候,看到了个有趣的css旋转相册,刚好之前做了一个星空背景dome,这里给大家分享下代码: 旋转相册参考:https://blog.csdn.net/gitchatxiaomi/art ...

  4. 使用纯css鼠标移入效果,炫酷的旋转正方体

    首先我们需要创建几个盒子 </div> <div class="wrap"> <div class="cube"> < ...

  5. CSS旋转缩放

    <style type="text/css"> figure{ float: left;}.test1{ border-radius: 0px; height: 200 ...

  6. css旋转

    翻转180度 /* entire container, keeps perspective */ .flip-container { perspective: 1000; } /* flip the ...

  7. CSS旋转&翻转，兼容方案

    CSS代码,高级浏览器使用transform,ie用滤镜实现. 转自http://aijuans.iteye.com/blog/19364921 /*水平翻转*/ 2 .flipx { 3 -moz- ...

  8. CSS旋转动画和动画的拼接

    旋转动画 第一个样式: @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); ...

  9. css 旋转

    div { transform:rotate(7deg); /*Internet Explorer 10.Firefox.Opera 支持 transform 属性*/ -ms-transform:r ...

  10. 学习 CSS 之用 CSS 3D 实现炫酷效果

    一.前言 把大象关进冰箱需要几步?三步,把冰箱门打开,把大象关进去,把冰箱门关上. 用 CSS 实现 3D 效果需几步?三步,设置透视效果 perspective,改变元素载体为 preserve-3 ...

随机推荐

  1. [易语言软件开源] [分享源码] 易语言D2D实现彩虹跑马灯

    注意使用了D2D1.1,部分win7用户可能用不了(win7以下也用不了) 不是单纯的一个彩虹条,是可以变幻的 其实也可以封装成GDI+的,但是GDI+占用比较大,就没有用 点击下载点击下载

  2. Java 抽象类与方法：实现安全性与代码重用

    Java 内部类 简介 在 Java 中,可以嵌套类(即类内部的类),称为内部类.嵌套类的目的是将属于一起的类分组,从而使您的代码更可读和可维护. 访问内部类 要访问内部类,请创建外部类的对象,然后创 ...

  3. 如何翻译 Markdown 文件？-2-几种商业及开源解决方案介绍

    背景 近期在搭建英文博客-<e-whisper.com>, 需要对现有的所有中文 Markdown 翻译为英文. 需求如下: 将 Markdown 文件从中文 (zh-CN) 翻译为英文 ...

  4. 优先队列的基本实现【数据结构与算法—TypeScript 实现】

    笔记整理自 coderwhy 『TypeScript 高阶数据结构与算法』课程 特性 效率比普通队列高 每个出队元素拥有最高优先级 可以用 数组.链表 等数据结构实现,但是 堆结构 是最常用的实现方式 ...

  5. Native API在HarmonyOS应用工程中的使用指导

      HarmonyOS的应用必须用js来桥接native.需要使用ace_napi仓中提供的napi接口来处理js交互.napi提供的接口名与三方Node.js一致,目前支持部分接口,符号表见ace_ ...

  6. HarmonyOS课程尝鲜计划，优享特权大礼包

      报名入口:https://developer.huawei.com/consumer/cn/activity/901689042385499023

  7. Kubernetes Pod配置：从基础到高级实战技巧

    本文深入探讨了Kubernetes Pod配置的实战技巧和常见易错点. 关注[TechLeadCloud],分享互联网架构.云服务技术的全维度知识.作者拥有10+年互联网服务架构.AI产品研发经验.团 ...

  8. linux 性能自我学习 ———— 不可中断进程和僵尸进程 [四]

    前言 简单介绍一下不可中断进程和僵尸进程. 正文 先来看下进程的状态: 那么这一列的状态是什么呢? R 是Running 或 Runnable 的缩写, 表示进程在cpu 的就绪队列中,正在运行或者正 ...

  9. python实现不同颜色气球隔开摆放，并且提示不能摆放的情况

    这个是一位隐秘人物让我做的一道题(如标题),我也分享出来了. 首先是成品展示(暂时没有做成可视化界面的样子): 我做的是把所有的气球录入进来,然后利用基础数据结构(字典,数据等)排序等,由于我是初学, ...

  10. 使用日志上下文聚合插件使能上下文查询及Livetail

    简介: 日志上下文浏览是排查业务故障时常用的方式,但受限于Logtail插件系统的设计,在Logtail 1.2.1版本前,如果用户使用Logtail插件来处理日志或采集容器的标准输出,那么用户将无法 ...