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图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...
随机推荐
- [INS-40724] No locally defined network interface matches the SCAN subnet.
环境如下 OS:AIX 7.1 DB:11.2.0.4 2节点RAC 报错信息 在安装11.2.0.4 RAC的时候报如下错误 INS-40724] No locally defined networ ...
- TP5新增模块
tp5模块自动生成 1build.php配置要生成的目录 <?php// +----------------------------------------------------------- ...
- python小程序--Two
一.程序需求 1.启动程序后,让用户输入工资,然后打印商品列表 2.允许用户根据商品编号购买商品 3.用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒 4.可随时退出,退出时,打印已购买商品和 ...
- 004-CSS怎样让背景充满整个屏幕
<!doctype html><html><body> ...Your content goes here...</body></html> ...
- 安装rlwrap-0.37.tar.gz
1.解压下载好的rlwrap文件 [root@wangliping tool]# tar -zxvf rlwrap-0.37.tar.gz 2.进入解压好的文件[root@wangliping too ...
- CentOS 7 zabbix实现微信报警
环境 : LAMP CentOS7 192.168.94.11 首先搭建LAMP环境 , 安装zabbix [root@zabbix-server ~]# wget http://repo.zab ...
- 2018-2019-2 《网络对抗技术》Exp2 后门原理与应用 20165215
目录 实验内容 基础问题回答 常用后门工具 Netcat windows 获取 linux 的shell linux 获取 winsdows 的shell 使用nc传输数据 使用nc传文件 Socat ...
- Linux基础命令---dmeg显示内核输出
dmesg dmesg指令用来打印和控制内核的输出信息,这些信息保存早ring buffer中. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora.SUSE.open ...
- mysql_study_1
创建数据库 创建表 数据类型 插入数据的几种方法 约束 代码 CREATE DATABASE mysql_shiyan; use mysql_shiyan; CREATE TABLE departme ...
- base64使用
public static void main(String args[]) throws Exception { InputStream in = null; byte[] data = null; ...