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> ...
随机推荐
- krpano下全屏后弹窗失效问题解决方法
原因 krpano 自身的全屏仅全屏自身,以外的html效果将无法显示 解决方法 把全屏按钮换成浏览器自身的全屏效果 解决步骤 vtourskin.xml <layer name="n ...
- 处理idea加载不到Spring的xml或者properties配置文件
在pom文件的 标签钱添加以下代码 <!--防止ieda加载不到xml或者properties文件开始--> <resources> <resource> < ...
- springboot2.0处理任何异常返回通用数据格式
异常分为以下三种 自定义异常 可预知异常 不可预知异常 下面具体说明如何分类处理,从而保证无论触发什么异常均可返回理想的自定义数据格式 ResultCode /** * Created by mrt ...
- 执行jar包，输出信息到文件
有时如果临时需要上项目执行一些脚本或者临时文件,可以将项目达成jar包,去执行 执行jar包: java -jar test.jar 输出日志到文件:nohup java -jar test.jar ...
- Codeforces 1236D. Alice and the Doll
传送门 注意到每个位置只能右转一次,首先考虑如果图没有障碍那么显然要走螺旋形的 然后现在有障碍,容易发现对于某个位置如果既可以直走又可以右转,那么一定会选择直走 因为如果转了以后就一定没法走到原本直走 ...
- 如何使用Navicat 创建一个SqlServer定时任务
因为网上资料不全,所以自己琢磨了一上午,终于弄出来了,记录一下. step1: 右击[函数]选择[新建函数]添加一个存储过程 step2: 选择[过程],点击下一步直至完成,然后编辑存储过程,保存 s ...
- python爬虫下正则各种字符串数据匹配
s = '*\/:?"<>|' #这9个字符在Windows系统下是不可以出现在文件名中的str1 = '\巴拉<1"!11[]>1*hgn/p:?|' # ...
- 深入理解hadoop之HDFS
深入理解hadoop之HDFS 刚刚才写完关于mapreduce的一篇博文,趁热打铁接下来聊聊HDFS.本博文参考资料为HADOOP权威指南第3版完版,博文如有错漏之处,敬请指正. HDFS即Hado ...
- Resource通配符路径 ——跟我学spring3
转自: https:// jinnianshilongnian.iteye.com/blog/1416322
- VSCode中Markdown目录显示异常
更新最新的VSCode之后编辑Markdown文件发现TOC标签的目录格式异常,发现是因为行尾字符导致,必须设置行尾字符进行解决.