css3正方体

使用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正方体的更多相关文章

纯手写的css3正方体旋转效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
css3 正方体旋转
<div class="contain"> <div class="box"> <div class="face one ...
CSS3 正方体
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
css3正方体效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）
本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...
从零开始的全栈工程师——利用CSS3画一个正方体 ( css3 )
transform属性 CSS3的变形(transform)属性让元素在一个坐标系统中变形.transform属性的基本语法如下: transform:none | <transform-fun ...
css3 利用perspective实现翻页效果和正方体以及翻转效果
要点: 1 实现3D效果就需要使用perspective属性 1 页面旋转使用css3的rorate 2 使用backface-visibility 实现正面元素翻转之后背面不可见,显示出反面的元素 ...
CSS3 制作正方体
一.预备知识变形属性 2D变形属性 transform:他是css3中的变形属性: 通过transform(变形) 来实现2d 或者3d 转换,其中2d 有,缩放 scale(x, y) ,移动 t ...
用css3做一个正方体
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

用maven建立一个工程
建立java工程 mvn archetype:generate -DgroupId=cn.maxhou.demo -DartifactId=myapp -DarchetypeArtifactId=ma ...
python 配合 es 查询数据
1.python脚本 [root@do1cloud03 ~]# cat python-es.py #!/usr/bin/env python3 from elasticsearch import El ...
[转帖]差之毫厘谬之千里！带你认识CPU后缀含义
差之毫厘谬之千里!带你认识CPU后缀含义 https://diy.pconline.com.cn/718/7189243_all.html 2015-11-16 00:15 出处:PConline原创 ...
sqarkSQL hiveSql
查看数据库 show databases; 进入数据库 use 库名查看表 show tables: select * from 表名 hdfs传输spark sql查询 hive找到指定路径sql ...
PAT B1001 害死人不偿命的(3n+1)猜想 (15)
AC代码 #include <cstdio> int main() { int n,step; scanf("%d", &n); while(n != 1) { ...
IntelliJ IDEA 2017.3.2 热加载（Hot Swap）
一.IntelliJ IDEA 自带热加载,修改代码后点击Ctrl + F9即可缺点:1.Ctrl + F9只对当前类重新编译加载 2.只支持构造代码块的CRUD.方法体内代码修改.资源文件内容的修 ...
linq多个条件
public static class PredicateBuilder { /// <summary> /// 机关函数应用True时:单个AND有效,多个AND有效:单个OR无效,多个 ...
c# word excel text转html的方法
首先是预览图片,这个功能很好实现,无非就是创建一个html页面,嵌套一个<img>,为了限制图片类型,可以定义一个允许预览类型数组作为限制: /// <summary> /// ...
【原创】大叔经验分享（62）kudu副本数量
kudu的副本数量是在表上设置,可以通过命令查看 # sudo -u kudu kudu cluster ksck $master ... Summary by table Name | RF | S ...
pymssql文档（转）
pymssql methods set_max_connections(number) -- Sets maximum number of simultaneous database connecti ...

css3正方体

css3正方体的更多相关文章

随机推荐

热门专题