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 ...
随机推荐
- luogu P4719 【模板】动态 DP 矩阵乘法 + LCT
方法二:LCT+矩阵乘法 上文中,我们用线段树来维护重链上的各种矩阵转移. 第二种方法是将树链剖分替换为动态树. 我们知道,矩阵乘法 $\begin{bmatrix} F_{u,0} & F_ ...
- commons.dbutils 的使用列子
c0p3的导入请参考前文 https://www.cnblogs.com/appium/p/10183016.html JdbcUtils: package cn.itcast.jdbc; impor ...
- 七夕心形demo
from turtle import * pensize(1) pencolor('red') fillcolor('pink') speed(5) up() goto(-30, 100) down( ...
- python第十二周：SQL alchemy、pymysql
python操作MySQL mysqldb python3之后的版本就不支持mysqldb了,故在此略过 pymysql #执行SQL语句 # -*- coding:utf-8 -*- #!/user ...
- Django admin（四）一些有用定制
原文:https://www.cnblogs.com/linxiyue/p/4075048.html Model实例,myapp/models.py: 1 2 3 4 5 6 7 8 9 10 11 ...
- Cleaning
Cleaning Time limit : 2sec / Memory limit : 256MB Score : 700 points Problem Statement There is a tr ...
- MySQL性能分析、及调优工具使用详解
本文汇总了MySQL DBA日常工作中用到的些工具,方便初学者,也便于自己查阅. 先介绍下基础设施(CPU.IO.网络等)检查的工具: vmstat.sar(sysstat工具包).mpstat.op ...
- Ngnix--知识点
ngnix擅长负载 均衡的反向代理 haproxy擅长高可用的反向代理,这个还支持TCP协议 ngnix只能支持HTTP和Email(这个HTTPS需要核实一下) ngnix和haproxy都需要ke ...
- RestTemplate使用详解
1.RestTemplate添加RequestHeader如content-type可通过httpclient设置 List<Header> headers = new ArrayList ...
- python Flask JQuery使用说明
0.前言 近期因为某种原因再次学习Flask框架.借助博客整理相关内容.Flask框架和Apache+PHP存在少许不同,Flask框架中JS和CSS文件存放于一个相对固定的位置. 普通情况下 ...