3d旋转展示代码

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>3D展示</title>
<style type="test/css">
#box{
height:378px;
width:640px;
}
</style>
</head>

<body >
<div id="box">
<img id="img" src="E:/img/miaov (0).jpg">
</div>
<input type="button" value="show" onclick="show();" />
<input type="button" value="stop" onclick="stop();" />
<script type="text/javascript">
var box;
var pic_arr=[];
var index=0;

function init(){
box=document.getElementById("box");
for(var i=0;i<=76;i++){
pic_arr[i]=document.createElement("img");
pic_arr[i].src="E:/img/miaov ("+i+").jpg";
}

}
function picRoll(){
if(index==0){
try{
box.removeChild(pic_arr[76]);
}catch(e){

}
box.appendChild(pic_arr[0]);
index++;
}else if(index>0&&index<=76){
box.removeChild(pic_arr[index-1]);
box.appendChild(pic_arr[index]);
index++;
}else if(index>76){
index=0;
}
}

function show() {
var aa=document.getElementById("img");
box.removeChild(aa);
taskid=setInterval(picRoll,50);
}

function stop(){
clearInterval(taskid);
}

</script>
</body>
</html>

时间: 2024-12-20 14:14:03

3d旋转展示代码的相关文章

CSS3 3D旋转动画代码实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

0068 3D 旋转:rotateX、rotateY、rotateZ、rotate3d

3D 旋转rotateX 3D 旋转指可以让元素在三维平面内沿着 x 轴.y 轴.z 轴 或者自定义轴进行旋转 语法 transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度 transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度 transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度 transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转 45 de

纯CSS3炫酷全屏3D立方体旋转展示幻灯片特效

这是一款效果非常酷的纯CSS3全屏3D立方体旋转展示幻灯片特效.该幻灯片使用全屏的3D立方体作为slide的载体,通过上下导航按钮,可以垂直旋转立方体,将立方体各个面上的幻灯片图片展示出来,效果非常炫酷. 在线预览   源码下载 使用方法 HTML结构 该幻灯片的立方体结构使用的是一个无序列表来制作,每一个<li>元素是一个立方体的面.幻灯片的上下导航按钮使用的是radio单选按钮和label来制作.整个3D立方体幻灯片被包裹在一个div容器中. 1 2 3 4 5 6 7 8 9 10 11

基于jQuery 3D旋转明星人物展示特效

分享一款基于jQuery 3D旋转明星人物展示特效.这是一款来自百度换肤活动的明星旋转展示效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="s-skin-wrap" data-d=""> <div class="s-skin-inner"> <div class="s-skin-content"> <div class="s-s

css3 3d旋转图片立方体特效代码

一.什么是css3 3d旋转 ? 形成一个3D空间: transform-style:preserve-3d    ( 让父元素形成3D,让其子元素在3D空间进行变化 ). 3d场景,在垂直于屏幕的方法,相对于3d多出个z轴,Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向,2d场景,在屏幕上水平和垂直的交叉线x轴和y轴. 二.关于css 3d旋转的相关属性及使用方法 变形属性:transform 3D功能函数 ----3D的位移:transform:translate3d(x,y,z);   

使用纯CSS3实现一个3D旋转的书本

有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种, 无需复杂的建模过程,使用图片和CSS3的一些变换即可实现更好的展示效果,简洁而实用. 书本的3D模型是所有商品中最为简单的,因为其本质上就是一个立方体(cube),只是带有封面/封底和左侧封条. 所以要构造一个3D书本展示,问题就被分解为构造一个立方体+旋转+图片背景. 1. 构造一个立方体 要创建一个立方体,首先我们需要创建一个虚拟的三维视觉空间,这可以通过设置包容器元素的perspectiv

一步步教你打造3D旋转盒

今天又来一了一篇关于3D效果的文章,教你打造自己的3D旋转盒 首先还是希望大家自己看看关于transform这个属性的相关特性作用,张前辈已经写了详细的教程,直接附上 http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/comment-page-1/ OK下面我们开始吧 首先我们创建如下的HTML基本骨架 <div id="container"&g

css3+jquery制作3d旋转相册&lt;转&gt;

css3+jquery制作3d旋转相册 首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准备 新建三个文件夹分别命名为css,js,img分别存放demo.css,jquery.js.demo.js,11张示例图片.新建demo.html将demo.css,jquery.js,demo.js引入. 二.图片倒影制作 1 <div id="wr

6个绚丽时尚的Web前端3D效果展示(附源码)

作为一个前沿的 Web 开发者,对于 HTML5 和 现在流行的3D技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身手.这篇文章挑选了6个前沿的绚丽的3D展示效果,希望对你有所帮助. 1.  3D自由立体旋转现实物理效果 3D自由立体旋转是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的3D自由立体旋转运动.玩法介绍:可以随意拖动鼠标.按住鼠标左键选中旋转物体.或者按住鼠标