js+css3 爱心+正方体（图片）旋转程序员表白神器实例

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>立方体</title>
<style>
    body{
        background-color:#000;
        perspective:1000px;/*景深：视角*/
   }
    #cube{
        width:300px;
       height:300px;
       margin:300px auto;
       /*border:1px solid blue;*/
       position:relative;
       transform-style:preserve-3d;/*3D的环境*/
       /*transition:2s;动画过渡*/
       /*transform-origin:50% 50% -25px;旋转中心*/
       transform:translateX(50px) translateY(108px) translateZ(50px);
   }
   #cube div{/*混合选择器*/
        width:100px;
       height:100px;
       border:1px solid #ccc;
       position:absolute;
   }
   #cube div:nth-child(1){
        top:100px;
       /*旋转中心：x方向 y方向 z方向*/
       /*transform-origin:50% 50% 0;*/
       transform-origin:top;
       /*css3属性：围绕X轴顺时针旋转90度*/
       transform:rotateX(-90deg)
   }
   #cube div:nth-child(2){
        top:0px;
       transform-origin:top;
       transform:rotateX(-90deg)
   }
   #cube div:nth-child(3){
        left:-100px;
       transform-origin:right;
       transform:rotateY(-90deg)
   }
   #cube div:nth-child(4){
        right:100px;
       transform-origin:left;
       transform:rotateY(90deg)
   }
   #cube div:nth-child(5){

   }
   #cube div:nth-child(6){
        /*css3变换：沿着z轴做移动*/
       transform:translateZ(-100px);
   }
   /*#cube:hover{css动态伪类
         transform:rotateY(360deg);
   }*/

   #heart3D{
         width:200px;
       height:320px;
       margin:auto;
       transform-style:preserve-3d;/*设置为3D环境*/
       /*css3自定义动画：动画的名称时间匀速运动无限重复*/
       animation:rot 10s linear infinite;
       position:relative;
   }
   /*css3动画关键帧*/
   @keyframes rot{
         from{
             transform:rotateX(0deg) rotateY(0deg);
       }
       to{
             transform:rotateX(360deg) rotateY(360deg);
       }
   }
   #heart3D div.heart{
         width:200px;
       height:320px;
         border:1px solid red;
       border-left:0;/*0|none 推荐用0，因为低版本的ie不兼容none*/
       border-bottom:0;
       border-radius:50% 50% 0/50% 40% 0;/*圆角属性*/
       /*transform:rotate(45deg);*/
       position:absolute;
       left:0;
       top:0;
   }
   #cube div img{
         width:100px;
       height:100px;
   }
</style>
</head>
<body>
<div id="heart3D">
     <div id="cube">
           <div><img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522407346855&di=bc95307347acc7e0ecfe5df36ad722e6&imgtype=0&src=http%3A%2F%2Ff7.topitme.com%2F7%2F9e%2F52%2F1124086373a27529e7l.jpg' /></div>
           <div><img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522407346854&di=82d6fef062d34752e5272b1892f3046e&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201603%2F22%2F20160322000031_iSCyd.thumb.700_0.jpeg' /></div>
           <div><img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522407346853&di=3fd9eb8e8a755bdb81913934b4dc52ef&imgtype=0&src=http%3A%2F%2Fimg.weixinyidu.com%2F150603%2F6d3bb0b1.jpg' /></div>
           <div><img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522407346850&di=fba7ef87c1cb8d9e20c2dcbc2657bdcd&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201410%2F26%2F20141026194411_xCHrY.jpeg' /></div>
           <div><img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522407346846&di=bd69b469bc79f3667c8a84bb44b8e4a7&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201508%2F26%2F20150826000011_Zx4Qe.jpeg' /></div>
           <div><img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522407521596&di=eec09f7535ca6b318feb5aac95776ecf&imgtype=0&src=http%3A%2F%2Fimg15.3lian.com%2F2016%2Fh1%2F234%2F44.jpg' /></div>
       </div>

         <script type="text/javascript">
             var oHeart3D=document.getElementById("heart3D");
           for(var i=0;i<36;i++){
                 var oDiv=document.createElement("div");
               oDiv.className="heart";
               oDiv.style.transform="rotateY("+i*10+"deg) rotateZ(45deg) translateX(60px)";
               //把创建出来的div添加到oHeart3D中
               oHeart3D.appendChild(oDiv);
           }
       </script>
       </div>
</body>

</html>

效果：

js+css3 爱心+正方体（图片）旋转 程序员表白神器 实例

猜你喜欢

js+css3 爱心+正方体（图片）旋转程序员表白神器实例