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> ...

随机推荐

python多进程单线程+协程实现高并发
并发:看起来像同时运行就是并发并行:同一时间同时被执行叫做并行,最大并行数就是CPU核数协程不是实实在在存在的物理基础和操作系统运行逻辑,只是程序员从代码层面避开了系统对遇到IO的程序会切走CPU ...
zping ping包工具20180605.exe测试版
链接: https://pan.baidu.com/s/1WB3BZn0r9n4DRU_8bNC65g 提取码: mybi zping的第一个exe版本由于未对兼容性进行测试,使用python3.6编 ...
【Python】【demo实验12】【练习实例】【列表的复制】
#!/usr/bin/python # encoding=utf-8 # -*- coding: UTF-8 -*- # 将一个列表复制到另外一个列表中: # 分析:可以使用[:] L = [0,3, ...
[转帖]图解SSL/TLS协议
图解SSL/TLS协议作者: 阮一峰日期: 2014年9月20日感谢腾讯课堂NEXT学院赞助本站,腾讯官方的前端课程免费试学. http://www.ruanyifeng.com/bl ...
去除MFC特性之一
先对文件读取路径进行去除,然后对程序中出现的其他地方进行慢慢去除. #include "WavIo.h" #include "mfcc.h" #include ...
Jmeter之逻辑控制器/定时器
Jmeter逻辑控制器更新中线程组->添加->逻辑控制器->XX控制器 1.仅一次控制器使用场景:线程数为1,登录1次,循环浏览N次. 如果,登录账号参数化,线程数为M时,登录 ...
P3748 [六省联考2017]摧毁“树状图”
传送门显然是可以树形 $dp$ 的对每个节点维护以下 $5$ 个东西 $1.$ 从当前节点出发往下的链的最大贡献 $2.$ 节点子树内不经过本身的路径最大贡献 $3.$ 节点子树内经过本身的路径的 ...
Python 风格指南
https://zh-google-styleguide.readthedocs.io/en/latest/google-python-styleguide/contents/ 目前个人遵循的基本规范 ...
DispatcherTimer和Timer的区别
两者区别是 Timer在非UI线程跑的,DispatcherTimer是在UI线程跑的, DispatcherTimer 可以直接更新UI Timer必须使用this.Dispatcher.Begin ...
【weixin】微信企业号和公众号区别和关系是什么？
在移动互联网快速发展和智能手机普遍应用的时代环境下,随着微信平台应用不断扩大和微信用户的迅速增加,微信公众号运营也有了很大的发展,企业.机构和个人纷纷迈入微信公众号运营的行列.微信公众号就是在微信公众 ...

css3正方体

css3正方体的更多相关文章

随机推荐

热门专题