3D旋转立方体案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 3D转换</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
} .box {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 24px;
margin: 100px auto;
position: relative;
transform: rotateY(30deg) rotateX(-30deg);
transform-style: preserve-3d;
/*perspective:200px;*/ animation: rotate 4s linear infinite;
} .box div{
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
opacity: 0.6;
} .front{
transform: translateZ(100px);
background: pink;
} .back{
transform: translateZ(-100px) rotateY(180deg);
background: green;
} .left{
transform: translateX(-100px) rotateY(-90deg);
background: yellowgreen;
} .right{
transform: translateX(100px) rotateY(90deg);
background: blueviolet;
} .top{
transform: translateY(-100px) rotateX(90deg);
background: blue;
} .bottom{
transform: translateY(100px) rotateX(-90deg);
background: red;
} @keyframes rotate {
from{
transform: rotateY(30deg) rotateX(-30deg);
}
to{
transform: rotateY(390deg) rotateX(-30deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
3D旋转立方体案例的更多相关文章
- 纯CSS炫酷3D旋转立方体进度条特效
在网站制作中,提高用户体验度是一项非常重要的任务.一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验.在这篇文章中,我们将大胆的将前面所学的3D立方体和进度条结合起来,制作一款纯CSS3的3D ...
- 纯CSS3超酷3D旋转立方体动画特效
简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...
- css3之3D 旋转立方体与哆啦A梦
主要记录两个css3 3D转换的示例 ㈠哆啦A梦 三个哆啦A梦的图片,分别让其围绕X轴,Y轴,Z轴旋转60度,鼠标放上开始发生变化. 具体代码如下图所示: <!DOCTYPE html> ...
- 360度3D 旋转插件
Circlr插件是一款基于jQuery的可以对图片进行360度全方位旋转展示的插件.Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动.鼠标滚轮和移动触摸来进行图片逐帧旋转的效果.比 ...
- 网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 制作3D图片立方体旋转特效
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>CS ...
- CSS3 3D图片立方体旋转
html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- 【CSS3进阶】酷炫的3D旋转透视
之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...
- CSS3——3D旋转图（跑马灯效果图）
CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5 ...
随机推荐
- BZOJ 2959: 长跑 LCT_并查集_点双
真tm恶心...... Code: #include<bits/stdc++.h> #define maxn 1000000 using namespace std; void setIO ...
- Ubuntu下解压(unzip)乱码的解决方法
在Windows上压缩的文件,是以Windows系统默认编码中文来压缩文件.由于zip文件中没有声明其编码,所以linux上的unzip一般以默认编码解压,中文文件名会出现乱码. 通过unzip -- ...
- Noip 2013 练习
转圈游戏 传送门 Solution 快速幂 Code //By Menteur_Hxy #include <cstdio> #include <cstdlib> #includ ...
- font-size:0消除元素间距
容易发现,inline-block元素之间会有间距, <!DOCTYPE html> <html> <head> <title></title&g ...
- [bzoj3123][Sdoi2013]森林_主席树_启发式合并
森林 bzoj-3123 Sdoi-2013 题目大意:给定一片共n个点的森林,T个操作,支持:连接两个不在一棵树上的两个点:查询一棵树上路径k小值. 注释:$1\le n,T \le 8\cdot ...
- Python学习-修饰器 - itemgetter的妙用
下面这篇对装饰器讲的很好,懂了. http://python.jobbole.com/85056/ <简单 12 步理解 Python 装饰器> 使用装饰器非常简单(见步骤10),但是写装 ...
- SPOJ 10628 Count on a tree （lca+主席树）
题意:给定一棵有n个结点的树,每一个点有一个权值.共同拥有m个询问.对于每一个询问(u,v,k),回答结点u至v之间第k小的点的权值. 思路:主席树+lca.首先指定一个根结点dfs一次并在此过程中建 ...
- Win8下建立shortcut到開始界面
在win8前建立開始菜单都非常easy,但到win8就有点不一样了.它的開始菜单是metro风格的.以下我们来看下详细的实现代码.有兴趣的朋友能够自己測试下,它的作用是设置shortcut到metro ...
- OpenCV打开摄像头失败
<span style="font-family: Arial, Helvetica, sans-serif;">#include <stdio.h>< ...
- 问题2-：Syntax error on tokens, delete these tokens
出现原因:拷贝下来的代码缺少{左大括号 然后运行时run as 没有选到java application 是因为没有main方法 加个public static void main(String() ...