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> ...
随机推荐
- 前端内容之CSS层叠样式表
CSS(Cascading Style Sheet层叠样式表) 把HTML认为是网页的骨架 那么CSS就是用于对HTML骨架进行修饰,比如加背景色.显示方式.位置等等属性 CSS语法形式: 一个完整的 ...
- Linux操作系统文档
一 Linux操作系统概述 l为什么要学习Linux操作系统: 1. 大部分服务端都是使用Linux操作系统(Django,爬虫,科学运算等项目是部署到服务器中的) 2. 一些企业和学校(国外学校 ...
- Redis迁移键
迁移键: move key db 用于在Redis内部进行数据迁移 dump key + restore key ttl value 可以实现在不同的Redis实例之间进行数据迁移 127.0.0.1 ...
- 记录 OpenCV 错误
最近在做一个"人脸识别"的项目,我想用OpenCV来分析图片中的人脸. 但是在测试的时候,程序报出“检测到0张脸” 可能的错误原因: 1.教程中OpenCV的版本问题,教程中用的版 ...
- 华为设备ACL与NAT技术
ACL 访问控制列表(Access Control Lists),是应用在路由器(或三层交换机)接口上的指令列表,用来告诉路由器哪些数据可以接收,哪些数据是需要被拒绝的,ACL的定义是基于协议的,它适 ...
- Unity Button按钮延迟
1.把下面脚本放到Editor文件夹下,这样脚本继承Button之后,新声明的public变量才能在Inspector面板显示出来. using System.Collections; using S ...
- spring AOP的相关术语
连接点:Joinpoint 其实业务层接口的方法 切入点:Pointcut 被增强的是切入点,没被增强是永远都是连接点.连接点不一定是切入点,切入点一定是连接点 通知:Advice 就是指要增强的 ...
- OLE使用
ABAP操作EXCEL有多重方法,今天记录一下OLE,具体步骤如下: 1. 首先要上载EXCEL模板 事物代码:SMW0,具体步骤参考 本博客 http://www.cnblogs.com/caizj ...
- python图像处理-生成随机验证码
前面说了PIL库,还说了图片的缩放.旋转和翻转.现在说下网站上常用的随机验证码的生成.参考网站:https://www.liaoxuefeng.com/wiki/1016959663602400/10 ...
- 第十三章、元类（metaclass）
目录 第十三章.元类(metaclass) 一.什么是元类 二.为什么用元类 第十三章.元类(metaclass) 一.什么是元类 在python中一切皆对象,那么我们用class关键字定义的类本身也 ...