使用animation和调整页面角度做出来

<html lang="zh">

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

    <style type="text/css">

        html{

    background: #;

    height: %;

}

/*最外层容器样式*/

.wrap{

    position: relative;

    position: absolute;

    top: ;

    right: ;

    bottom: ;

    left: ;

    width: 200px;

    height: 200px;

    margin: auto;

    /*改变左右上下,图片方块移动*/

}

/*包裹所有容器样式*/

.cube{

    width: 200px;

    height: 200px;

    margin:  auto;

    transform-style: preserve-3d;

    transform: rotateX(-30deg) rotateY(-80deg);

    -webkit-animation: rotate 20s infinite;

    /*匀速*/

    animation-timing-function: linear;

}

@-webkit-keyframes rotate{

    from{transform: rotateX(0deg) rotateY(0deg);}

    to{transform: rotateX(360deg) rotateY(360deg);}

}

.cube div{

    position: absolute;

    width: 200px;

    height: 200px;

    /*opacity: 0.2;*/

    transition: all .4s;

}

/*定义所有图片样式*/

.pic{

    opacity: 0.2;

    width: 200px;

    height: 200px;

    border: 1px solid red;

    background-size: % %;

}

.pic:hover{

    opacity: 0.9;

}

.cube .out_front{

    transform: rotateY(0deg) translateZ(100px);

}

.cube .out_back{

    transform: translateZ(-100px) rotateY(180deg);

}

.cube .out_left{

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

}

.cube .out_right{

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

}

.cube .out_top{

    transform: rotateX(90deg) translateZ(100px);

}

.cube .out_bottom{

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

}

/*定义小正方体样式*/

.cube span{

    display: bloack;

    width: 100px;

    height: 100px;

    position: absolute;

    top: 50px;

    left: 50px;

}

.cube .in_pic{

    width: 100px;

    height: 100px;

    border: 1px solid red;

    background-size: % %;

}

.cube .in_front{

    transform: rotateY(0deg) translateZ(50px);

}

.cube .in_back{

    transform: translateZ(-50px) rotateY(180deg);

}

.cube .in_left{

    transform: rotateY(90deg) translateZ(50px);

}

.cube .in_right{

    transform: rotateY(-90deg) translateZ(50px);

}

.cube .in_top{

    transform: rotateX(90deg) translateZ(50px);

}

.cube .in_bottom{

    transform: rotateX(-90deg) translateZ(50px);

}

/*鼠标移入后样式*/

.cube:hover .out_front{

    transform: rotateY(0deg) translateZ(200px);

}

.cube:hover .out_back{

    transform: translateZ(-200px) rotateY(180deg);

}

.cube:hover .out_left{

    transform: rotateY(90deg) translateZ(200px);

}

.cube:hover .out_right{

    transform: rotateY(-90deg) translateZ(200px);

}

.cube:hover .out_top{

    transform: rotateX(90deg) translateZ(200px);

}

.cube:hover .out_bottom{

    transform: rotateX(-90deg) translateZ(200px);

}

    </style>

</head>

<body>

    <!--/*外层最大容器*/-->

        <div class="wrap">

    <!--    /*包裹所有元素的容器*/-->

        <div class="cube">

            <!--前面图片 -->

            <div class="out_front">

                <div class="pic">

                </div>

            </div>

            <!--后面图片 -->

            <div class="out_back">

                <div class="pic">

                </div>

            </div>

            <!--左图片 -->

            <div class="out_left">

                <div class="pic">

                </div>

            </div>

            <div class="out_right">

                <div class="pic">

                </div>

            </div>

            <div class="out_top">

                <div class="pic">

                </div>

            </div>

            <div class="out_bottom">

                <div class="pic">

                </div>

            </div>

            <!--小正方体 -->

            <span class="in_front">

                <div class="in_pic">

                </div>

            </span>

            <span class="in_back">

                 <div class="in_pic">

                </div>

            </span>

            <span class="in_left">

                <div class="in_pic">

                </div>

            </span>

            <span class="in_right">

                <div class="in_pic">

                </div>

            </span>

            <span class="in_top">

                <div class="in_pic">

                </div>

            </span>

            <span class="in_bottom">

                <div class="in_pic">

                </div>

            </span>

        </div>

        </div>

</body>

</html>

页面效果：

css3正方体的更多相关文章

  1. 纯手写的css3正方体旋转效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. css3 正方体旋转

    <div class="contain"> <div class="box"> <div class="face one ...

  3. CSS3 正方体

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. css3正方体效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）

    本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...

  6. 从零开始的全栈工程师——利用CSS3画一个正方体 ( css3 )

    transform属性 CSS3的变形(transform)属性让元素在一个坐标系统中变形.transform属性的基本语法如下: transform:none | <transform-fun ...

  7. css3 利用perspective实现翻页效果和正方体 以及翻转效果

    要点: 1 实现3D效果就需要使用perspective属性 1 页面旋转使用css3的rorate 2 使用backface-visibility 实现正面元素翻转之后背面不可见,显示出反面的元素 ...

  8. CSS3 制作正方体

    一.预备知识 变形属性 2D变形属性 transform:他是css3中的变形属性: 通过transform(变形) 来实现2d 或者3d 转换,其中2d 有,缩放 scale(x, y) ,移动 t ...

  9. 用css3做一个正方体

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. C#常用处理数据类型转换、数据源转换、数制转换、编码转换相关的扩展

    public static class ConvertExtensions { #region 数据类型转换扩展方法 /// <summary> /// object 转换成string ...

  2. Go语言中方法和函数的区别

    今天看<Go语言实战>发现方法和函数不太一样,写的格式不一样,用法也不一样.所以记一次笔记. 在Go语言中,函数和方法不太一样,有明确的概念区分.其他语言中,比如Java,一般来说,函数就 ...

  3. 论文阅读 | Probing Neural Network Understanding of Natural Language Arguments

    [code&data] [pdf] ARCT 任务是 Habernal 等人在 NACCL 2018 中提出的,即在给定的前提(premise)下,对于某个陈述(claim),相反的两个依据( ...

  4. SpringBoot配置文件可存放位置和加载顺序

    使用IDEA创建一个spring初始化项目后.默认的配置文件在resources文件夹下. SpringBoot启动时,会扫描application.properties或application.ym ...

  5. spy++工具

    vs工具的spy++和第三方spy4win工具下载地址: https://files.cnblogs.com/files/zhangmo/spytools.rar https://files.cnbl ...

  6. IDEA安装maven

    1.先到maven的官网下载安装包:http://maven.apache.org/download.cgi 解压安装包 2.配置环境变量 新建变量名MAVEN_HOME 变量值    D:\Soft ...

  7. 第十三章 字符串 （四）之Scanner类

    一.Scanner简述 Scanner扫描器类本质上是由正则表达式实现的,可以接受任何能产生数据的数据源对象,默认以空白符进行分词(包括\n等),使用各种next方法进行扫描匹配,获取匹配的数据. 二 ...

  8. 从入门到自闭之Python--RESTful API规范与序列化

    RESTful API规范 REST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态转移. 它首次出现在2000年Roy Fieldi ...

  9. lua与c的交互(运用)

    (1)lua程序 (2)C++程序(头文件) extern "C" {     #include "lua.h"     #include "lual ...

  10. Java Web ActiveMQ与WebService的异同

    Webservice 和MQ(MessageQueue)都是解决跨平台通信的常用手段 一.WebService:用来远程调用服务,达到打通系统.服务复用的目的.是SOA系统架构——面向服务架构的体现. ...