又到周末，来弄点HTML5的特效玩玩，今天要折腾的是HTML5 3D图片特效，图片在垂直方向上被分割成一条条小矩形，在图片上拖动鼠标即可让每一个小矩形旋转，从而让图片形成3D立体的效果，来看看效果:http://keleyi.com/a/bjad/aipfqsip.htm
以下是源代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML5图片3D旋转-柯乐义</title>
</head>
<body>
<div><br />请使用支持HTML5的浏览器查看本页。<br />请在本页面的一个位置按住鼠标左键，向右边或者向左边拖动，就可以看看动画效果了。</div><br /><br /><br /><br /><br />
<style>
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
</style>
<style>
/**************************************************/
/* INSTRUCTIONS: DRAG OVER THE IMAGE TO TWIST IT */
/**************************************************/
/*based original css on simple cube @ http://keleyi.com then just experiemented */
body {
perspective: 50em;
background-color: #333333;
color:#fff;
}
.cube {
position: relative;
margin: 0em auto 0;
padding: 0px;
width: 20em;
height: 3.0em;
list-style: none;
transform-style: preserve-3d;
/*animation: ani 8s infinite linear;*/
}
.face {
box-sizing: border-box;
position: absolute;
top: 180px;
left: 50%;
/*border: 1px solid #f0f0f0;*/
margin: -8em;
padding: 1.6em;
width: 20em;
height: 2em;
opacity: .85;
background: lightblue;
background: url(http://keleyi.com/image/a/wstwx19d.jpg) -15px -90px;
background-repeat: no-repeat;
backface-visibility: hidden;
}
.face:nth-child(1) {
transform: translateZ(10em);
}
.face:nth-child(2) {
transform: rotateY(180deg) translateZ(10em);
}
.face:nth-child(3) {
transform: rotateY(90deg) translateZ(10em);
}
.face:nth-child(4) {
transform: rotateY(-90deg) translateZ(10em);
}
a {
color: #ccc;
}
</style>
<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/css3/10/prefixfree.min.js"></script>
<ul id="level0" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level1" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level2" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level3" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level4" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level5" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level6" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level7" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level8" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level9" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level10" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level11" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level12" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src='http://keleyi.com/keleyi/phtml/html5/24/TweenMax.min.js'></script>
<script type="text/javascript">
// work in progress - just playing around to try to get some interesting effects - drag over the image it should twist around in some sort of css3d space - should work in chrome and FF not sure about ie - seen similar ideas for displaying graphics many times but i think one of the best was an old flash one by yugop.com but I cannot find it online anymore and it has been done many times since.
/*
* Copyright MIT <2013> < keleyi.com >
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
* documentation files (the "Software"), to deal in the Software without restriction, including without limitation
* the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
* to permit persons to whom the Software is furnished to do so, subject to the following conditions:
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
* PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
* FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
* ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
// vars
var gap = 0;
var slow = 7;
var md = false;
var oldMouseX = 0;
var mouseX = 0;
var mouseY = 0;
var numLevels = 13;
var gaps = [];
var gapscnt = 0;
var currentLevel = 0;
var px = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var vx = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init()
function tickHandler() {
//run your logic here...
if (md) {
gap = averageGaps(mouseX - oldMouseX);
}
gap *= .9;
vx[currentLevel] += gap;
oldMouseX = mouseX;
var i;
for (i = currentLevel; i < numLevels; i++) {
vx[i + 1] += ((vx[i] - vx[i + 1]) / slow);
}
for (i = currentLevel; i > 0; i--) {
vx[i - 1] += (vx[i] - vx[i - 1]) / slow;
}
for (i = 0; i < numLevels; i++) {
px[i] += (vx[i] - px[i]);
// trying tweenmax duration 0 method of setting rotationY
TweenMax.to($('#level' + i), 0, { rotationY: px[i] });
}
}
// functions
function init() {
// code for cube
var d = 0.12; var p = 3;
for (var i = 0; i < numLevels; i++) {
var posString = "-115px " + (-48 * i) + "px";
TweenMax.to($('#level' + i + ' li'), 1, { css: { backgroundPosition: posString }, delay: (d * i) });
}
TweenLite.ticker.addEventListener("tick", tickHandler);
$('.cube').mouseover(function () {
TweenMax.to($('.face'), 1, { opacity: 1 });
});
$('.cube').mouseout(function () {
TweenMax.to($('.face'), 1, { opacity: .85 });
});
$(document).on('mousedown', function (event) {
event.preventDefault();
oldMouseX = mouseX;
gaps.length = 0;
md = true;
}).on('mouseup', function (event) {
md = false;
}).on('mousemove', function (event) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
});
$('#level0').mousedown(function () { currentLevel = 0; });
$('#level1').mousedown(function () { currentLevel = 1; });
$('#level2').mousedown(function () { currentLevel = 2; });
$('#level3').mousedown(function () { currentLevel = 3; });
$('#level4').mousedown(function () { currentLevel = 4; });
$('#level5').mousedown(function () { currentLevel = 5; });
$('#level6').mousedown(function () { currentLevel = 6; });
$('#level7').mousedown(function () { currentLevel = 7; });
$('#level8').mousedown(function () { currentLevel = 8; });
$('#level9').mousedown(function () { currentLevel = 9; });
$('#level10').mousedown(function () { currentLevel = 10; });
$('#level11').mousedown(function () { currentLevel = 11; });
$('#level12').mousedown(function () { currentLevel = 12; });
var touchEnabled = 'ontouchstart' in window || navigator.msMaxTouchPoints;
if (touchEnabled == true) {
console.log("touchEnabled");
document.addEventListener('touchmove', onTouchMove, false);
document.addEventListener('touchstart', onTouchStart, false);
document.addEventListener('touchend', onTouchEnd, false);
}
}
function onTouchMove(event) {
event.preventDefault();
var touch = event.touches[0];
mouseX = touch.pageX - windowHalfX;
mouseY = touch.pageY - windowHalfY;
}
function onTouchStart(event) {
event.preventDefault();
oldMouseX = mouseX;
gaps.length = 0;
md = true;
}
function onTouchEnd(event) {
event.preventDefault();
md = false;
}
function averageGaps(n) {
if (isNaN(n)) { return 0; }
var gl = gaps.length;
gaps[gapscnt] = n;
var ave = 0;
for (var i = 0; i < gl; i++) {
ave += gaps[i];
};
gapscnt = (gapscnt + 1) % 10;
var tmp = ave / gl;
if (isNaN(tmp)) { tmp = 0; }
return tmp;
}
</script>
<br /><br /><br /><a href="http://keleyi.com/a/bjad/aipfqsip.htm" target="_blank">原文</a> <a href="http://keleyi.com/keleyi/phtml/html5/24/ydm.htm">源代码</a><br /><br /><br /><br /><br /><br /><div><br />图片的美女是斯嘉丽·约翰逊（Scarlett Johansson），1984年11月22日生于纽约，美国女演员。<br /><br />大图请点击：<a href="http://keleyi.com/image/a/3cmla1pp.jpg" target="_blank">斯嘉丽·约翰逊</a><br /></div><br /><br />
</body>
</html>
这里我们引用了知名的JS动画框架TweenMax.js
我们用了n个ul来实现将图片分割成n个小长方形，为了之后js调用的方便，我们将这些ul标识成level-n。
然后我们看看CSS代码，这里主要是设置美女图片的路径。
注意需要引用jquery http://keleyi.com/a/bjad/w7bbn7nw.htm