html5相册源代码 html5动态相册代码

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

html5 3d旋转相册代码怎么用

以下是代码：

!DOCTYPE html

html

head

titletransform-style实现Div的3D旋转-柯乐义/title

style

*{font-size: 24px;color: #00ff00; padding:0; margin:0;}

#container {

position: relative;

height: 300px;

width: 300px;

-webkit-perspective: 500;

margin-top: 200px;

margin-right: auto;

margin-left: auto;

}

#parent-keleyi-com {

margin: 10px;

width: 280px;

height: 280px;

background-color: #666;

opacity: 0.3;

-webkit-transform-style: preserve-3d;

-webkit-animation: spin 15s infinite linear;

}

#parent-keleyi-com div {

position: absolute;

top: 40px;

left: 40px;

width: 280px;

height: 200px;

padding: 10px;

-webkit-box-sizing: border-box;

}

#parent-keleyi-com :first-child {

background-color: #000;

-webkit-transform: translateZ(-100px) rotateY(45deg);

}

#parent-keleyi-com :last-child {

background-color: #333;

-webkit-transform: translateZ(50px) rotateX(20deg);

-webkit-transform-origin: 50% top;

}

/*执行Y轴旋转360度动画*/

@-webkit-keyframes spin {

from {-webkit-transform: rotateY(0);}

to {-webkit-transform: rotateY(360deg);}

}

/style

/head

body

div请使用支持CSS3的浏览器a href="" target="_blank"原文/a/div

div id="container"

div id="parent-keleyi-com"

diva href="/"柯乐义/a/div

diva href="/"keleyi.com/a/div

/div

/body

/html

相关问答

Q1: html5怎样调用手机摄像头或者相册

今天做手机网站，想实现手机扫描二维码功能。首先实现在浏览器中调用手机摄像头，实现拍照功能并且把拍下的照片显示在页面并上传到服务器上，然后再在服务器端进行分析。

首先实现在浏览器中调用摄像头，当然用现在火的不行的html5，html5中的video标签，并将从摄像头获得视频作为这个标签的输入来源。实现拍照功能的html5代码：

article

style scoped

video { transform: scaleX(-1); }

p { text-align: center; }

/style

h1Snapshot Kiosk/h1

section id="splash"

p id="errorMessage"Loading.../p

/section

section id="app" hidden

pvideo id="monitor" autoplay/video canvas id="photo"/canvas

pinput type=button value="📷" onclick="snapshot()"

/section

script

navigator.getUserMedia({video:true}, gotStream, noStream);

var video = document.getElementById('monitor');

var canvas = document.getElementById('photo');

function gotStream(stream) {

video.src = URL.createObjectURL(stream);

video.onerror = function () {

stream.stop();

};

stream.onended = noStream;

video.onloadedmetadata = function () {

canvas.width = video.videoWidth;

canvas.height = video.videoHeight;

document.getElementById('splash').hidden = true;

document.getElementById('app').hidden = false;

};

}

function noStream() {

document.getElementById('errorMessage').textContent = 'No camera available.';

}

function snapshot() {

canvas.getContext('2d').drawImage(video, 0, 0);

}

/script

/article

经本人测试在android手机的opera浏览器浏览器下可以正常实现手机拍照功能。android手机下的google chrome浏览器还不行，自带的浏览器也测试没有通过。iphone手机的safari浏览器也是不支持的。

Q2: 新人求助啊，html5怎么实现调用手机拍照和相册

一）获取视频流添加HTML5Video标签并摄像获视频作标签输入源 var video = document.getElementByIdx_x_x("video"); navigator.getUserMedia({video:true}, function (stream) { video.src = window.webkitURL.createObjectURL(stream); }, function (error) { alert(error); }); 二）拍照关于拍照功能采用HTML5Canvas实捕获Video标签内容Video元素能作Canvas图像输入 function scamera() { var videoElement = document.getElementByIdx_x_x('video'); var canvasObj = document.getElementByIdx_x_x('canvas一'); var context一 = canvasObj.getContext('二d'); context一.fillStyle = "#ffffff"; context一.fillRect(0, 0, 三二0, 二四0); context一.drawImage(videoElement, 0, 0, 三二0, 二四0); } 三）图片获取要Canvas获取图片数据其核思路用canvastoDataURLCanvas数据转换base陆四位编码PNG图像 var imgData=canvas.toDataURL(image/png); imgData格式：data:image/png;base陆四,xxxxx 真图像数据base陆四编码逗号部

Q3: Html有没有源码可以自动获取手机相册

html5 可以

要从Canvas获取图片数据，其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像

var imgData=canvas.toDataURL(“image/png”);

imgData格式如下：

”data:image/png;base64,xxxxx“

真正图像数据是base64编码逗号之后的部分

可以试一下

Q4: HTML5+CSS3小实例：3D旋转木马相册

HTML5+CSS3做一个3D旋转木马相册，鼠标悬停时，停止旋转，移开继续旋转，大家把图片替换成自己的即可。

效果：

源码：