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

html-css040

html5 3d旋转相册代码怎么用,第1张

以下是代码:

<!DOCTYPE html>

<html>

<head>

<title>transform-style实现Div的3D旋转-柯乐义</title>

<style>

*{font-size: 24pxcolor: #00ff00padding:0margin: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="http://keleyi.com/a/bjad/s89uo4t1.htm" target="_blank">原文</a></div>

<div id="container">

<div id="parent-keleyi-com">

<div><a href="/">柯乐义</a></div>

<div><a href="/">keleyi.com</a></div>

</div>

</div>

</body>

</html>

HTML5非常强大,尤其是和CSS3结合,有时候能达到非同凡响的网页动画效果。今天要分享的这款HTML5应用就是一款很酷的3D立体图片相册应用,它可以用鼠标多拽从多个角度浏览相册图片,点击图片,就可以放大图片。