运用transform元素

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style type="text/css">    * {          margin: 0;      padding: 0;    }    body{          perspective: 1000px;    }    section{          width:310px;      height:430px;      margin: 100px auto;      background: url("image/pk1.png") no-repeat;      background-size: cover;      position: relative;      transform-style: preserve-3d;      transition: all 5s linear;    }    section:hover{          transform: rotateY(360deg);      animation-iteration-count: infinite;    }    section div{          width:100%;      height:100%;      background: url("image/pk1.png") no-repeat;      position: absolute;      top: 0;      left:0;    }    section div:nth-child(1){          transform: rotateY(0deg) translateZ(400px);    }    section div:nth-child(2){          transform: rotateY(60deg) translateZ(400px);    }    section div:nth-child(3){          transform: rotateY(120deg) translateZ(400px);    }    section div:nth-child(4){          transform: rotateY(180deg) translateZ(400px);      }    section div:nth-child(5){          transform: rotateY(240deg) translateZ(400px);        }    section div:nth-child(6){          transform: rotateY(300deg) translateZ(400px);    }  </style></head><body>    <section>        <div></div>        <div></div>        <div></div>        <div></div>        <div></div>        <div></div>    </section></body></html>

上一篇：CSS3——靶心，圣杯与双飞翼布局

下一篇：CSS3补充

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

运用transform元素

发表评论

最新留言

关于作者

推荐文章