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

随机推荐

Spring源码分析（1）容器的基本实现——核心类介绍
bean是Spring中最核心的东西,因为Spring就像是个大水桶,而bean就像是容器中的水,水桶脱离了水便也没什么用处了,那么我们先看看bean的定义. public class MyTestB ...
SQLite进阶-12.Distinct关键字
目录 DISTINCT关键字 DISTINCT关键字 DISTINCT关键字与SELECT语句一起使用,用来消除重复数据,获得唯一数据. -- 语句 SELECT DISTINCT column1, ...
排序算法大汇总 Java实现
一.插入类算法排序算法的稳定性:两个大小相等的元素排序前后的相对位置不变.{31,32,2} 排序后{2,31,32},则称排序算法稳定通用类: public class Common { pub ...
首篇-记录自己学习python之路！
对于自己学习python的目的比较明确——爬虫和量化. 目前找了一些资源进行学习,先进行量化方面的学习,爬虫滞后.目前的目标是“180天掌握尽可能多的量化能力”! 以后定时发送自己学习思考内容以作自己 ...
python 基础（十八）--shutil模块
shutil模块 shutil.copyfileobj(src,dst):只拷贝文件内容,需要open文件:目标文件不存在时创建,存在时覆盖 shutil.copyfileobj(open('old. ...
Postgresql explain的analyze和buffers选项
sql查询分析: 原文地址:https://blog.csdn.net/qq_28893679/article/details/78316283
Jmeter之JDBC取样器（数据库增删改查）
1.将数据库的jar包存入jmeter/lib目录下 2.配置jmeter 测试计划中“添加jar包” 数据库访问配置:线程组->添加->配置原件->JDBC Connection ...
版本控制工具SVN学习
教学视频链接:https://edu.aliyun.com/course/83?spm=5176.10731334.0.0.778e6580zC0Ri0 版本控制工具SVN学习 1,SVN的简介在实 ...
opencv 仿射变换投射变换，单应性矩阵
仿射 estimateRigidTransform():计算多个二维点对或者图像之间的最优仿射变换矩阵 (2行x3列),H可以是部分自由度,比如各向一致的切变. getAffineTransform( ...
4.图片左轮播图（swiper）
一.html部分二.js部分三.源代码部分 <body> <div id="box"> <img src="imges/111.jpg& ...

css3正方体

css3正方体的更多相关文章

随机推荐

热门专题