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. C# 运算符详解：包含算术、赋值、比较、逻辑运算符及 Math 类应用

    运算符用于对变量和值执行操作.在C#中,有多种运算符可用,包括算术运算符.关系运算符.逻辑运算符等. 算术运算符 算术运算符用于执行常见的数学运算: int x = 100 + 50; // 加法,结 ...

  2. Windows下Net6开源akstream项目vs2022调试GB28181协议对接摄像头全流程

    一.背景介绍 笔者经历多个项目对接摄像头需求,不同项目具体要求又有所不同,碰到的摄像头对接开发问题,整理记录.此篇主要用于记录备用及给有缘人提供解决思路等. 1．   同一局域网对接(海康摄像头),如 ...

  3. mupdf实用操作demo，C++操作PDF文件

    前文: 最近有个项目,需要读写PDF,本来想着挺简单的,读写PDF有那么多的库可以使用,唰唰的就完成了. 忘记了我写C++的,还是在国产系统上开发的. 所以一般的东西还不好使,因为项目需要在多个架构的 ...

  4. Linux&Ubuntu之更换服务器

    前言 更换网卡.主板上的板载网卡.主板是服务器硬件维护的常规操作.通常新换(板载)网卡的MAC地址会变更,而部分服务器更换主板也会导致板载网卡MAC地址变化.由于CAS(Ubuntu)系统会将新MAC ...

  5. spring boot 手动value和自动注入配置的区别[五]

    前言 前面两篇中,写道我们注入配置的方式,是通过是注解的方式完成,如下: @ConfigurationProperties(prefix ="person") 这意味着: 我们写一 ...

  6. uniapp小程序页面实现元素与胶囊进行居中对齐

    无论是否为uni,关键在于获取胶囊中点的位置,如果是原生小程序根据小程序文档获取,其余逻辑处理是一致的 代码语法都只是技术选择,重点是逻辑处理,对于技术的运用,代码技术好比是积木,好的程序就是好的组合 ...

  7. 2022飞天技术峰会：硬之城如何基于 SAE 打造数智化电子工业互联网平台

    简介: 全球数字化时代已经到来,数字经济正推动生产方式.生活方式和治理方式的深刻变化,成为重组全球要素资源,重塑经济结构,改变全球竞争格局的关键力量. 本文根据硬之城 CEO 李六七先生在峰会上的分享 ...

  8. TairSearch：加速多列索引查询

    简介: 互联网及传统行业应用服务的关键数据一般存储在MySQL这类的关系型数据库中.如需缓解数据库访问压力,可引入Redis等缓存系统承担热数据的查询,以此提升查询效能.然而业务场景如果是在数据库上做 ...

  9. 自建Kubernetes集群如何使用弹性容器实例ECI

    简介: 虚拟节点(Virtual Node)实现了Kubernetes与弹性容器实例ECI的无缝连接,让Kubernetes集群轻松获得极大的弹性能力,而不必受限于集群的节点计算容量.您可以灵活动态的 ...

  10. 友盟+U-APM 移动应用性能体验报告:Android崩溃率达0.32%，OPPO 、华为、VIVO 崩溃表现良好

    简介: 应用性能稳定是良好用户体验中非常关键的一环,而现实情况却是应用崩溃.卡顿.加载缓慢.页面白屏等问题,频频出现在用户的真实体验之中,成为影响业务表现的直接杀手.为此,应用性能管理(APM)正在国 ...