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图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...
随机推荐
- 牛客随笔（c++）
1.关于指针的字节大小: 当为32位系统时大小为4字节,64位系统时大小为8字节: #include<iostream> using namespace std; int main() { ...
- 做一个有产品思维的研发：Scrapy安装
每天10分钟,解决一个研发问题. 如果你想了解我在做什么,请看<做一个有产品思维的研发:课程大纲>传送门:https://www.cnblogs.com/hunttown/p/104909 ...
- 用python脚本获取运行环境中的module 列表
由于脚本运行在远程环境,总报错说一些module没有.所以决定彻底对环境进行一次摸底. 于是,用如下代码即可实现: #!/usr/bin/env python import sys try: #pri ...
- git使用手册整理
-------------------20181217------------------- git使用:在gitbash 下初始化用户: $ git config --global user.nam ...
- Sublime 个人常用快捷键
Sublime 个人常用快捷键 Hot Key Alt + F3 选中文本所以有相同项;同多次Ctrl + D Ctrl + L 选中整行,继续按可继续选 Ctrl + Shift + M 选择括号内 ...
- #WEB安全基础 : HTTP协议 | 0x10 扩展HTTP报文结构概念和内容编码
#以后的知识都是HTTP协议的扩展,如果精力有限可以选择暂时忽略,注意只是暂时忽略,以后的东西同样重要 HTTP传输数据时可以直接传输也可以对数据进行编码,由于编码在计算机内运行,所以会占用一些CPU ...
- 002-MVC布局页
~/Views/Shared/_LayoutPage1.cshtml <!DOCTYPE html> <html> <head> <meta name=&qu ...
- sersync客户端搭建及配置
首先需要自行下载sersync包,地址如下: 谷歌项目地址:https://code.google.com/archive/p/sersync/ 64位下载地址:https://storage.goo ...
- mysql 用行号rownum更新顺序号字段
UPDATE customer SET OrderNo = ( SELECT afterOrder.rowNum FROM ( SELECT @row_number := CASE WHEN @cus ...
- python 文件重命名
将文件夹中的.jsp重命名为.html import os def rename(path): files = os.listdir(path) for file in files: dir = os ...