正文
html5效果,html5效果图及素材
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
HTML5如何在网页中实现3D效果
CSS3除了为开发者提供二维变形之外，还将动画从二维平面推动到了三维立体状态，能够实现真正的三维特效。
三维变形和二维变形一样，均使用的是transform属性。想要触发三维变形有两种方式：一种方式是通过语法告知浏览器“请采用三维方式进行变形处理”，另一种方式是直接使用CSS3三维变形的语法。
触发方法1：告知浏览器变形方式
-webkit-transform-style:preserve-3d;
Tips：IE不支持三维变形，在移动端，绝大多数的浏览器均为WebKit内核，因此，在此句代码之前需要书写-webkit-的前缀内核。
Tips：不要为body元素设置-webkit- transform-style: preserve 3d,否则会对position:fixed定位的元素造成布局影响。在开发当中，如果当前元素属于body的子级元素，又希望应用三维变形，则在body和当前元素之间多嵌套一层结构，并为这层元素应用三维变形即可。
触发方法2：直接使用CSS3变形语法
!DOCTYPE html
head
meta charset="UTF-8"
title言成科技/title
style
.box1 {
width: 150px;
height: 150px;
border: 2px solid blue;
}
.box1 div {
height: 150px;
background: rgba(0, 0, 0, 0.5);
-webkit-transform: translate3d(30px, 60px, 20px) rotateX(30deg);
transform: translate3d(30px, 60px, 20px) rotateX(30deg);
}
/style
/head
body
div class="box1"
div/div
/div
/body
/html
具体三维变形的具体属性详见《CSS3-3D相关知识详解—视角以及变形方向》
3D效果制作
需求
制作一个立方体，并进行旋转
代码实例
!DOCTYPE HTML
html
head
meta charset="utf-8" /
title言成科技/title
link rel="stylesheet" type="text/css" href="" /
style
.main-bac { -webkit-perspective:1500; } /*设定透视距离*/
.main{
width:200px;
height:200px;
margin: 0 auto;
position:relative;
-webkit-transform-style:preserve-3d;
-webkit-transition:-webkit-transform 2s ease 0s;/*过渡时间*/
}
/*基本样式*/
.main p{
position: absolute;
margin: 0;
padding: 0;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 26px;
opacity:0.5;
}
/*将第一个元素Z轴向前移动100px，形成第一个面（正面）*/
.main p:nth-of-type(1) {
background-color:red;
-webkit-transform:translateZ(100px);
}
/*将第一个元素Z轴向前移动100px，绕x轴旋转90度形成上面的面*/
.main p:nth-of-type(2) {
background-color:orange;
-webkit-transform:rotateX(90deg) translateZ(100px);
}
/*将第一个元素Z轴向前移动100px，绕x轴旋转-90度形成下边的面*/
.main p:nth-of-type(3) {
background-color:yellow;
-webkit-transform:rotateX(-90deg) translateZ(100px);
}
/*将第一个元素Z轴向前移动100px，绕y轴旋转90度形成右侧的面*/
.main p:nth-of-type(4) {
background-color:green;
-webkit-transform:rotateY(90deg) translateZ(100px);
}
/*将第一个元素Z轴向前移动100px，绕y轴旋转-90度形成左侧的面*/
.main p:nth-of-type(5) {
background-color:#b435bf;
-webkit-transform:rotateY(-90deg) translateZ(100px);
}
/*将第一个元素Z轴向前移动100px，绕y轴旋转180度形成后面（背面）*/
.main p:nth-of-type(6) {
background-color:blue;
-webkit-transform:rotateY(180deg) translateZ(100px);
}
/*鼠标移入时绕Y轴旋转180度，绕Z轴旋转180度*/
.main:hover {-webkit-transform:rotateY(180deg) rotateZ(180deg); }
/style
/head
body
div class="main-bac"
div class="main"
p言成科技/p
p3D立方体/p
pHTML5学堂/p
p3D立方体/p
p码匠/p
pJavaScript/p
/div
/div
/body
/html
代码解析
当鼠标移入的时候，立方体逐渐的发生旋转（非突变），围绕X轴旋转45度的同时，围绕Y轴旋转45度。
当鼠标移出立方体时，立方体恢复到初始状态。在最开始状态时，并没有采用无限远的视角，设置一定的视角，让刚开始时直视立方体时，不会觉得是一个平面。
3D效果制作-目标效果图
以上资料来源：《HTML5布局之路》
相关问答
Q1: 使用html5的效果怎么样？
我们公司用HTML5进行混合开发，虽然，用phonegap打包，但是由于仍然建立在浏览器之上，仍有不少兼容性问题，但是HTML5最大的特性就是跨平台性以及开发成本低，对于中小企业来说是福音，随着HTML5技术体系的日趋成熟，会蚕食一部分原生APP的市场，而由于HTML5在移动端的表现，可以说Flash在移动端已死。
总体来说，HTML5的效果还是不错的。
Q2: 如何制作html5的动画效果？
主要思想：
首先要准备一张有连续帧的图片，然后利用HTML5 Canvas的draw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。
关键技术点：
JavaScript 函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法，
另外一个参数代表间隔时间，单位为毫秒数。代码示例：
setTimeout( update, 1000/30);
Canvas的API-drawImage()方法，需要指定全部9个参数：
ctx.drawImage(myImage, offw, offh, width,height, x2, y2, width, height);
其中offw, offh是指源图像的起始坐标点，width, height表示源图像的宽与高，x2,y2表
示源图像在目标Canvas上的起始坐标点。
!DOCTYPE html
html
head
meta http-equiv="X-UA-Compatible" content="chrome=IE8"
meta http-equiv="Content-type" content="text/html;charset=UTF-8"
titleCanvas Mouse Event Demo/title
link href="default.css" rel="stylesheet" /
script
var ctx = null; // global variable 2d context
var started = false;
var mText_canvas = null;
var x = 0, y =0;
var frame = 0; // 22 5*5 + 2
var imageReady = false;
var myImage = null;
var px = 300;
var py = 300;
var x2 = 300;
var y2 = 0;
window.onload = function() {
var canvas = document.getElementById("animation_canvas");
console.log(canvas.parentNode.clientWidth);
canvas.width = canvas.parentNode.clientWidth;
canvas.height = canvas.parentNode.clientHeight;
if (!canvas.getContext) {
console.log("Canvas not supported. Please install a HTML5 compatible browser.");
return;
}
// get 2D context of canvas and draw rectangel
ctx = canvas.getContext("2d");
ctx.fillStyle="black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
myImage = document.createElement('img');
myImage.src = "../robin.png";
myImage.onload = loaded();
}
function loaded() {
imageReady = true;
setTimeout( update, 1000/30);
}
function redraw() {
ctx.clearRect(0, 0, 460, 460)
ctx.fillStyle="black";
ctx.fillRect(0, 0, 460, 460);
// find the index of frames in image
var height = myImage.naturalHeight/5;
var width = myImage.naturalWidth/5;
var row = Math.floor(frame / 5);
var col = frame - row * 5;
var offw = col * width;
var offh = row * height;
// first robin
px = px - 5;
py = py - 5;
if(px -50) {
px = 300;
}
if(py -50) {
py = 300;
}
//var rate = (frame+1) /22;
//var rw = Math.floor(rate * width);
//var rh = Math.floor(rate * height);
ctx.drawImage(myImage, offw, offh, width, height, px, py, width, height);
// second robin
x2 = x2 - 5;
y2 = y2 + 5;
if(x2 -50) {
x2 = 300;
y2 = 0;
}
ctx.drawImage(myImage, offw, offh, width, height, x2, y2, width, height);
}
function update() {
redraw();
frame++;
if (frame = 22) frame = 0;
setTimeout( update, 1000/30);
}
/script
/head
body
h1HTML Canvas Animations Demo - By Gloomy Fish/h1
prePlay Animations/pre
div id="my_painter"
canvas id="animation_canvas"/canvas
/div
/body
/html
Q3: 推荐8款HTML5相关的特殊效果 看看都能够实现哪些功能
HTML5是HTML的升级版，HTML5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web
应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。今天我们推荐8款使用HTML5生成的特
殊效果，希望可以对大家的使用带来帮助!
HTML5实现的五子棋游戏
在线演示
这是一款使用HTML5实现的五子棋特效，与计算机的对局你不见得能次次都赢得胜利，不信可以点击在线演示。
一款不需要视频文件的视频播放器-Frame player
在线演示
HTML5视频是非常棒的，它可以很容易的用在多款设备上。但是它也有自己的问题，比如移动设备的播放器，可能有不同版本不兼容的情况。今天我们介绍这款视频播放器完善了之前的效果，用起来更方便。希望大家喜欢!
3D菜单
在线演示
或许在现如今这个科技发达的时代，在线点餐已不是新鲜事。餐厅可以对Menu进行设计，点击菜名会相应弹出菜品的照片，或者还可以增加卡路里，原材料和客户们的评价等。绝对是一个超时髦的创意!
用HTML5的画布实现撕布的动画效果
在线演示
用HTML5的画布实现撕布的效果，滑动鼠标，布会随着鼠标变动。点击鼠标左键，然后滑动鼠标，布就会被割开。如果你还没有查看过这款演示效果，那绝对逼真的让你震撼!
HTML5 Canvas(画布) 基础使用和介绍
在线下载
还记得在过去的Web前端开发中，如果你需要绘图或者生成相关图形的话，使用Flash可能是你唯一或者说最强大的实现方式，而在近些年的技术
热点HTML5标准中，HTML
Canvas(画布)能够更加方便的帮助你实现2D绘制图形图像及其各种动画效果功能。在今天的这篇技术教程中我们将介绍基本的Canvas使用，希望大
家觉得有帮助!
HTML5画布生成的2D光源效果
在线演示
超金属的背景，仿佛探照灯的经过让他看上去更加的立体。这是一款使用HTML5 Canvas生成的2D光源效果。绝对让你不后悔使用它!
HTML5的Flappy bird实现
在线演示
著名的Flappy Bird，相信知道的人一定不少吧，点击你的空格，不要让它掉下来，看看你最终的成绩有多好。发上来我们切磋一下吧.
Sonic - 循环加载的利器
在线演示1 在线演示2 在线演示3
Sonic是一个不到3k，非常小的JS类库，你可以用这个类库来创建自定义的加载动画。它的循环动画效果非常赞，比如你可以用它做一条不断追
逐自己尾巴
的蛇，这样的动画。Sonic使用了HTML5的canvas元素和其相关API。它基于在一定小的时间间隔上，基于预定义的路径，画出下一个形状，从而
完成动画效果。你可以使用arc，bezier，或line的方法来定义路径。
