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 ...
随机推荐
- 移动端APP UI规范
- py西游公关之模块
Py西游攻关之模块 模块&包(* * * * *) 模块(modue)的概念: 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可 ...
- 09.正则表达式re-1.正则表达式
1.正则表达式概述 正则表达式(英语:Regular Expression,在代码中常简写为regex.regexp或RE),是计算机科学的一个概念. 正则表达式使用单个字符串来描述.匹配一系列匹配某 ...
- linux下Qt程序编译运行
Qt程序编译运行很简单,利用Qt提供的qmake工具可以很好的进行编译,在命令行输入一下编译过程:qmake -project //声称项目文件(*.pro)qmake ...
- 暑假集训D14总结
%dalao 今天dalao继续来讲课~讲的是一个叫kd树的奇怪东西= = 然而啥都没听懂 考试 今天多校联考,日常炸= = 照例打了前两道题的暴力(T1随便hash一下就水过了啊喂),然后开始推T3 ...
- [bzoj2131]免费的馅饼_树状数组
免费的馅饼 bzoj-2131 题目大意: 注释:$1\le n \le 10^5$,$1\le w \le 10^8$. 想法:首先,想到dp 状态:dp[i][j]表示i分钟在位置j的最大收益 优 ...
- Column注解的的RetentionPolicy的属性值是RUTIME,这样注解处理器可以通过反射，获取到该注解的属性值，从而去做一些运行时的逻辑处理
1.Column注解的的RetentionPolicy的属性值是RUTIME,这样注解处理器可以通过反射,获取到该注解的属性值,从而去做一些运行时的逻辑处理 2. 自定义注解: 使用@interfac ...
- 关于在linux下出现stdio.h文件不存在等gcc标准库不能找到的解决的方法
首先说明一下我的系统配置:ubuntu 12.04 gcc 4.6.3 有几天没有使用ubuntu了,今天拿出来编程序,刚開始编译一个uboot1.1.6的代码.出现了stdio.h:没有那么 ...
- BIEE11G Rpd合并
Rpd合并 如图,合并两个rpd须要用三个rpd文件来操作.一个是blank.rpd.这是一个空白rpd,在biee合并的时候作为"原始主资料档案库":另一个是modified.R ...
- Qt的Socket数据通讯的一个样例。
QTcpServer类 用来侦听port ,获取QTcpSocket. QTcpSocket有 connected的信号(已经连接),还有readyread()信号,表示已经有数据发过来了.准备读取 ...