CSS3 3D图片立方体旋转
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3制作3D图片立方体旋转特效</title>
<link rel="stylesheet" href="3d.css">
</head>
<body>
<div class="wrap">
<div class="cube">
<div class="out_front">
<img src="img/1.png" class="pic">
</div>
<div class="out_back">
<img src="img/2.png" class="pic">
</div>
<div class="out_left">
<img src="img/3.png" class="pic">
</div>
<div class="out_right">
<img src="img/4.png" class="pic">
</div>
<div class="out_top">
<img src="img/5.png" class="pic">
</div>
<div class="out_bottom">
<img src="img/6.png" class="pic">
</div>
<span class="in_front">
<img src="img/7.png" class="in_pic">
</span>
<span class="in_back">
<img src="img/8.png" class="in_pic">
</span>
<span class="in_left">
<img src="img/9.png" class="in_pic">
</span>
<span class="in_right">
<img src="img/10.png" class="in_pic">
</span>
<span class="in_top">
<img src="img/11.png" class="in_pic">
</span>
<span class="in_bottom">
<img src="img/12.png" class="in_pic">
</span>
</div>
</div>
</body>
</html>
css
html{
background:linear-gradient(#ff0 0%,#000 80%);
height: 100%;
}
.wrap{
width: 650px;
height: 200px;
margin: 150px 360px;
position: relative;
}
.cube{
width: 200px;
height: 200px;
margin: 0 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.8;
transition: all .4s;
}
.pic{
width: 200px;
height: 200px;
}
.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;
}
.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);
}
CSS3 3D图片立方体旋转的更多相关文章
- 纯css3 3D图片立方体旋转动画特效
纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...
- 网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 制作3D图片立方体旋转特效
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>CS ...
- 超绚丽CSS3多色彩发光立方体旋转动画
CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.css3动画的属性主要分为三类:transform.transition以及anim ...
- CSS3实现图片循环旋转
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 利用CSS3给图片添加旋转背景特效
首先看旋转特效:http://***/demo/201512/2015-12-09-css3-image-hover-animate/index.html 这是一款纯CSS3实现的当鼠标滑过图片时文字 ...
- 手把手教你玩转CSS3 3D技术
手把手教你玩转 CSS3 3D 技术 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上 ...
- 纯CSS3实现超立体的3D图片侧翻倾斜效果
看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是创意不错.先来看看效果图.那么接下来我们分析一下源码吧,显示html代码,非常简单: ...
- 利用纯CSS3实现超立体的3D图片侧翻倾斜效果
原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...
随机推荐
- XML CDATA识别“<,>”
http://www.w3school.com.cn/xml/xml_cdata.asp 术语 CDATA 指的是不应由 XML 解析器进行解析的文本数据(Unparsed Character Dat ...
- 依据ECMA规范，手写一个bind函数
Function.prototype.bind 函数,参见ECMA规范地址 如题,这次来实现一个boundFunction函数,不挂载在Function.prototype上,而是一个单独声明的函数. ...
- django--orm对象关系映射之常用的增删改查
1.查询表里所有数据 book=models.Book.objects.all() 2.条件查询 book = models.Book.objects.filter(id=1).first() # 查 ...
- 在绘图的时候import matplotlib.pyplot as plt报错：ImportError: No module named '_tkinter', please install the python-tk package
在绘图的时候import matplotlib.pyplot as plt报错:ImportError: No module named '_tkinter', please install the ...
- 监控单个进程占用cpu与内存的使用情况
#!/bin/bashinterval=1if [ "$1" != "" ]then interval=$1fiecho "检查时间间隔(单位秒):& ...
- Installing ROS Indigo on the Raspberry Pi
Installing ROS Indigo on the Raspberry Pi Description: This instruction covers the installation of R ...
- linux安装sz && rz功能
[1]编译安装 root 账号登陆后,依次执行以下命令: cd /tmp wget http://www.ohse.de/uwe/releases/lrzsz-0.12.20.tar.gz . ./c ...
- c++常用
常用函数,方便查找,不定时更新. 1. 生成随机数 #include <iostream> #include <stdlib.h> #include <time.h> ...
- 软件综合实践Axure介绍
首先就是下载安装Axure这款软件了,在百度上搜索“”Axure rp下载“”即可,下载完成后,打开exe安装,根据步骤一步步点击下一步即可完成安装. 运行该软件时会出现类似于填写激活码的东西,这时依 ...
- GRU and LSTM
门控循环单元(GRU): 背景: 当时间步数较大或者时间步数较小的时候,循环神经网络的梯度较容易出现衰减或者爆炸.虽然裁剪梯度可以应对梯度爆炸, 但是无法解决梯度衰减的问题.正因为如此,循环神经网络在 ...