用html5 css怎么做3d相册?

html-css017

用html5 css怎么做3d相册?,第1张

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

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

以下是代码：

<!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>