爱心相册html,css3实现的3D旋转爱心相册【原创】

这是前一段时间学习css3，在网上看一个老师的公开课上讲的一个小案例，觉得挺有趣的，而且也能帮助熟悉css3的一些代码，所以第二天自己就尝试着写一个出来。由于对css3的代码不熟悉，花了小半天时间，最后还是败在IE的兼容上面。今天发出来是给大家提供一个写css3代码的思路，了解css3一部分代码的用途。先贴张效果图：

下面是全部代码：

rotate

body {

background-color: #000;

-webkit-perspective: 1000;

-moz-perspective: 1000;

-ms-perspective: 1000;

perspective: 1000;

}

#rotate{

position: relative;

width: 200px;

height: 320px;

margin: auto;

margin-top: 13%;

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

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

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

transform-style: preserve-3d;

animation:myrotate linear 15s infinite;

-webkit-transform-origin: 50% 50% 0;

-moz-transform-origin: 50% 50% 0;

-ms-transform-origin: 50% 50% 0;

-o-transform-origin: 50% 50% 0;

transform-origin: 50% 50% 0;

}

@keyframes myrotate{

from{

-webkit-transform: rotateY(0deg)rotateX(0deg);

-ms-transform: rotateY(0deg)rotateX(0deg);

-o-transform: rotateY(0deg)rotateX(0deg);

transform: rotateY(0deg)rotateX(0deg);

}

to{

-webkit-transform: rotateY(720deg)rotateX(360deg);

-ms-transform: rotateY(720deg)rotateX(360deg);

-o-transform: rotateY(720deg)rotateX(360deg);

transform: rotateY(720deg)rotateX(360deg);

}

}

@-webkit-keyframes myrotate{

from{

-webkit-transform: rotateY(0deg)rotateX(0deg);

-ms-transform: rotateY(0deg)rotateX(0deg);

-o-transform: rotateY(0deg)rotateX(0deg);

transform: rotateY(0deg)rotateX(0deg);

}

to{

-webkit-transform: rotateY(720deg)rotateX(360deg);

-ms-transform: rotateY(720deg)rotateX(360deg);

-o-transform: rotateY(720deg)rotateX(360deg);

transform: rotateY(720deg)rotateX(360deg);

}

}

@-moz-keyframes myrotate{

from{

-webkit-transform: rotateY(0deg)rotateX(0deg);

-ms-transform: rotateY(0deg)rotateX(0deg);

-o-transform: rotateY(0deg)rotateX(0deg);

transform: rotateY(0deg)rotateX(0deg);

}

to{

-webkit-transform: rotateY(720deg)rotateX(360deg);

-ms-transform: rotateY(720deg)rotateX(360deg);

-o-transform: rotateY(720deg)rotateX(360deg);

transform: rotateY(720deg)rotateX(360deg);

}

}

#rotate .heart {

position: absolute;

top: 0;

left: 0;

width: 200px;

height: 320px;

border:2px solid red;

border-left: 0;

border-bottom: 0;

border-radius: 50% 50% 0/50% 50% 0;

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

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

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

transform-style: preserve-3d;

-webkit-transform: rotateZ(45deg)translateX(60px);

-ms-transform: rotateZ(45deg)translateX(60px);

-o-transform: rotateZ(45deg)translateX(60px);

transform: rotateZ(45deg)translateX(60px);

}

#cube {

position: relative;

width: 100px;

height: 100px;

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

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

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

transform-style: preserve-3d;

transform: rotateZ(-45deg)translate3d(-80px,66px,50px);

-webkit-transform-origin: 50% 50% -50px;

-moz-transform-origin: 50% 50% -50px;

-ms-transform-origin: 50% 50% -50px;

-o-transform-origin: 50% 50% -50px;

transform-origin: 50% 50% -50px;

}

#cube .cube {

position: absolute;

top: 0;

left: 0;

width: 100px;

height: 100px;

}

#cube .cube:nth-child(1) {

top:-100px;

-webkit-transform: rotateX(90deg);

-ms-transform: rotateX(90deg);

-o-transform: rotateX(90deg);

transform: rotateX(90deg);

-webkit-transform-origin: 50% bottom 0;

-moz-transform-origin: 50% bottom 0;

-ms-transform-origin: 50% bottom 0;

-o-transform-origin: 50% bottom 0;

transform-origin: 50% bottom 0;

}

#cube .cube:nth-child(2) {

top:100px;

-webkit-transform: rotateX(-90deg);

-ms-transform: rotateX(-90deg);

-o-transform: rotateX(-90deg);

transform: rotateX(-90deg);

-webkit-transform-origin: 50% top 0;

-moz-transform-origin: 50% top 0;

-ms-transform-origin: 50% top 0;

-o-transform-origin: 50% top 0;

transform-origin: 50% top 0;

}

#cube .cube:nth-child(3) {

left:-100px;

-webkit-transform: rotateY(-90deg);

-ms-transform: rotateY(-90deg);

-o-transform: rotateY(-90deg);

transform: rotateY(-90deg);

-webkit-transform-origin: right 50% 0;

-moz-transform-origin: right 50% 0;

-ms-transform-origin: right 50% 0;

-o-transform-origin: right 50% 0;

transform-origin: right 50% 0;

}

#cube .cube:nth-child(4) {

left:100px;

-webkit-transform: rotateY(90deg);

-ms-transform: rotateY(90deg);

-o-transform: rotateY(90deg);

transform: rotateY(90deg);

-webkit-transform-origin: left 50% 0;

-moz-transform-origin: left 50% 0;

-ms-transform-origin: left 50% 0;

-o-transform-origin: left 50% 0;

transform-origin: left 50% 0;

}

#cube .cube:nth-child(5) {

/*top:-50px;*/

}

#cube .cube:nth-child(6) {

/*top:-50px;*/

-webkit-transform: translateZ(-100px);

-ms-transform: translateZ(-100px);

-o-transform: translateZ(-100px);

transform: translateZ(-100px);

}

var rotate = document.getElementById('rotate');

var html = '';

for(var i = 1; i<36; i++){

html +='

}

rotate.innerHTML += html;

因为css3的兼容不太好，所以css代码基本都是兼容写法。

可以把代码复制下来，去看看效果，也可以看看我的代码，因为公开课老师的也只是给了一些思路，说用了哪些css动画，并没有看到源码，自己摸索着写的，所以有些代码写的不太规范，可能有些写的都不对，但是效果出来了，凑合着看看，哪些不对的给个评论，一起交流。

ie不支持transform-style: preserve-3d;所以最好用谷歌浏览器打开。

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/22746.html

微信打赏

支付宝打赏

感谢您对作者Jonny的打赏，我们会更加努力！    如果您想成为作者，请点我