CSS实现正方体旋转
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 星空旋转正方体</title>
<style type="text/css">
body{
background-image:linear-gradient(to top,blue,#000);
}
*{
padding: 0;
margin:0;
}
#Mypage{
/*-webkit-perspective:600px;
-webkit-perspective-origin:50% 50%;*/
-webkit-transform-style:preserve-3d;
position: relative;
width: 400px;
height: 400px;
margin:100px auto;
}
#Mypage li{
list-style:none;
}
.pages{
position: absolute;
width:400px;
height:400px;
}
#page1{
background-color: #FF0088;
-webkit-transform:translateZ(200px);
}
#page2{
background-color: #FFFF00;
-webkit-transform:rotateX(90deg) translateZ(200px);
}
#page3{
background-color: #00FF00;
-webkit-transform:rotateX(270deg) translateZ(200px);
}
#page4{
background-color: #00FFFF;
-webkit-transform:rotateY(90deg) translateZ(200px);
}
#page5{
background-color: #7700FF;
-webkit-transform:rotateY(270deg) translateZ(200px);
}
#page6{
background-color: #FF00FF;
-webkit-transform:translateZ(-200px);
}
#closth{
margin: 0 auto;
font-size: 18px;
text-align: center;
padding-top: 100px;
float: left;
}
#closth div{
padding-top: 20px;
margin-bottom: 15px;
}
#closth div a{
color: #fff;
margin-right: 40px;
}
#heard{
width: 80%;
margin: 0 auto;
margin-bottom: 300px;
}
#Opage{
margin-top: 20px;
}
.wrap:first-child{
margin-left: 400px;
}
.wrap{
float: left;
list-style: none outside none;
padding-right: 40px;
}
.wrap a{
color: #fff;
}
</style>
</head>
<body>
<div id="heard">
<div id="closth">
<div><a href="javascript:tops()">上翻</a></div>
<div><a href="javascript:lefts()">左翻</a><a href="javascript:cleanth()">重置</a><a href="javascript:rights()">右翻</a></div>
<div><a href="javascript:bottoms()">下翻</a></div>
</div>
<ul id="Mypage">
<li class="pages" id="page1"><img width="400px" height="400px"></li>
<li class="pages" id="page2"><img width="400px" height="400px"></li>
<li class="pages" id="page3"><img width="400px" height="400px"></li>
<li class="pages" id="page4"><img width="400px" height="400px"></li>
<li class="pages" id="page5"><img width="400px" height="400px"></li>
<li class="pages" id="page6"><img width="400px" height="400px"></li>
</ul>
<ul id="Opage">
<li class="wrap"><a href="javascript:ones()">1</a></li>
<li class="wrap"><a href="javascript:twos()">2</a></li>
<li class="wrap"><a href="javascript:threes()">3</a></li>
<li class="wrap"><a href="javascript:fours()">4</a></li>
<li class="wrap"><a href="javascript:fives()">5</a></li>
<li class="wrap"><a href="javascript:sixs()">6</a></li>
</ul>
</div>
<script type="text/javascript">
var x=0;
var y=0;
var n,m=0;
function cleanth(){
x=0;
y=0;
n=0;
m=0;
var curpage=document.getElementById('Mypage');
curpage.style.transition='-webkit-transform 20ms linear';
curpage.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";
}
function count(){
if(x%360==0){
n=x/360;
}
if(y%360==0){
m=y/360;
}
}
function tops()
{
count();
x+=90;
var curpage=document.getElementById('Mypage');
curpage.style.transition='-webkit-transform 3s linear';
curpage.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";
}
function bottoms(){
count();
x-=90;
var curpage=document.getElementById('Mypage');
curpage.style.transition='-webkit-transform 3s linear';
curpage.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";
}
function lefts(){
count();
y+=90;
var curpage=document.getElementById('Mypage');
curpage.style.transition='-webkit-transform 3s linear';
curpage.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";
}
function rights(){
count();
y-=90;
var curpage=document.getElementById('Mypage');
curpage.style.transition='-webkit-transform 3s linear';
curpage.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";
}
function ones(){
count();
x=0+n*360;
y=0+m*360;
var curpage=document.getElementById('Mypage');
curpage.style.transition='-webkit-transform 3s linear';
curpage.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";
}
function twos(){
count();
x=-90+n*360;
y=m*360+0;
var curpage=document.getElementById('Mypage');
curpage.style.transition='-webkit-transform 3s linear';
curpage.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";
}
function threes(){
count();
x=90+n*360;
y=0+m*360;
var curpage=document.getElementById('Mypage');
curpage.style.transition='-webkit-transform 3s linear';
curpage.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";
}
function fours(){
count();
x=0+n*360;
y=m*360-90;
var curpage=document.getElementById('Mypage');
curpage.style.transition='-webkit-transform 3s linear';
curpage.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";
}
function fives(){
count();
x=0+n*360;
y=90+m*360;
var curpage=document.getElementById('Mypage');
curpage.style.transition='-webkit-transform 3s linear';
curpage.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";
}
function sixs(){
count();
x=180+n*360;
y=0+m*360;
var curpage=document.getElementById('Mypage');
curpage.style.transition='-webkit-transform 3s linear';
curpage.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";
}
</script>
</body>
</html>
CSS实现正方体旋转的更多相关文章
- 解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
- 基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- CSS动画之旋转魔方轮播
很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过一些属性并没有深究细节. 在我自己写完这篇 ...
- 用html标签+css写出旋转的正方体
有一段时间没写代码了,刚写有点手生,无从下手,为了能快速进入状态,就写了这一个小东西,纯用标签和样式表写.下面看一下我写的. 这一段是样式表: <style> *{ margin: 0; ...
- 纯CSS做3D旋转魔方
昨天偶然看见网友(简单说 用CSS做一个魔方旋转的效果)做的一个3D旋转魔方 效果就是本博客右侧公告栏所示 在这里把做法展现出来 感兴趣的可以试试 做成自己特有的魔方 <!DOCTYPE h ...
- CSS缩放函数, 旋转函数与倾斜函数
1 :缩放 scale(x,y)函数让元素根据中心原点对对象进行缩放,大于1进行放大,小于1则缩小,如果为负值,则先进行翻转再进行缩放操作. 实例: HTML: <div c ...
- 纯css代码写旋转动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 正方体旋转demo
接着上一篇博客的内容顺藤摸瓜往下想,既然stage有景深这个概念,可以表达3D场景,那么这个stage就可以呈现立体几何咯,于是自己写了个Cubic Demo 一个正方体有6个面,我们把一个正方体平铺 ...
- 纯CSS实现立方体旋转
下面为通过CSS动画实现的立方体旋转,可以改变CSS代码中关键帧定义(@keyframes)来改变立方体的旋转方式 HTML部分: <body class="body"> ...
随机推荐
- SQL Server 列存储索引强化
SQL Server 列存储索引强化 SQL Server 列存储索引强化 1. 概述 2.背景 2.1 索引存储 2.2 缓存和I/O 2.3 Batch处理方式 3 聚集索引 3.1 提高索引创建 ...
- Tomcat 启动报错：No default web.xml
原因是:tomcat 中conf 目录中的 web.xml 被无意删除掉了.从其他tomcat中复制一个过来就行了. conf 目录 没有 web.xml 导致的问题是,server.xml 中配置的 ...
- SQL Server自动化运维系列——批量执行SQL脚本（Power Shell）
需求描述 一般在生产环境中,在投产的情况下,需要批量的来执行SQL脚本文件,来完成整个投产,如果投产文件比较多的情况下,无疑这是一个比较痛苦的过程,所以本篇通过PowerShell脚本来批量完成. 监 ...
- php应用jquery做ajax操作
以下是全部代码: <html> <head> <title>jQuery Ajax 实例演示</title> </head> <scr ...
- getSupportFragmentManager要用在FragmentActivity及其子类中
getSupportFragmentManager要用在FragmentActivity及其子类中!! 关于安卓抽屉导航!! * 自定义侧边栏
- [转]17个新手常见Python运行时错误
原址:http://www.oschina.net/question/89964_62779?p=1 当初学 Python 时,想要弄懂 Python 的错误信息的含义可能有点复杂.这里列出了常见的的 ...
- NIO与AIO，同步/异步，阻塞/非阻塞
1.flip(),compact(),与clear()的使用 flip()内部实现,先将limit设为当前位置,再将缓冲区的postion设为0,所以是为将缓冲区的数据写出到其它通道或者get()作准 ...
- 洛谷P1196 银河英雄传说[带权并查集]
题目描述 公元五八○一年,地球居民迁移至金牛座α第二行星,在那里发表银河联邦 创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展. 宇宙历七九九年,银河系的两大军事集团在巴米利恩星域爆发战争.泰山 ...
- webpack中字体配置，可以引入bootstrap
{test:/\.(eot|ttf|woff|woff2|svg)$/,loader:'file?name=fonts/[name].[ext]'} 将css中用到的字体全部提取存放到fonts目录下 ...
- java构造方法的作用以及简单java类
public class TestDemo{ public static void main(String args[]){ Emp emp1 =new Emp(001,"tom" ...