3D旋转动画练习 demo 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
body{background: black;}
div{
    width:400px;
    height:400px;
    border:1px solid pink;
    perspective:500px;
    perspective-origin: top;
    }
ul{
    position: relative;
    transform-style: preserve-3d;
    margin:150px;
}
li{position:absolute;
    width:100px;
height:100px;
background:pink;
opacity:0.3;}
ul li:nth-child(2n){background: yellow;}    
ul li:nth-child(1){
    transform:translateZ(200px);
}
ul li:nth-child(12){
    transform:translateZ(-200px);
}
ul li:nth-child(2){
    transform:rotateY(90deg)translateZ(200px);
}
ul li:nth-child(11){
    transform:rotateY(-90deg)translateZ(200px);
}
ul li:nth-child(3){
    transform:rotateY(30deg)translateZ(200px);
}
ul li:nth-child(10){
    transform:rotateY(-150deg)translateZ(200px);
}
ul li:nth-child(4){
    transform:rotateY(60deg)translateZ(200px);
}
ul li:nth-child(9){
    transform:rotateY(-120deg)translateZ(200px);
}
ul li:nth-child(5){
    transform:rotateY(120deg)translateZ(200px);
}
ul li:nth-child(8){
    transform:rotateY(-60deg)translateZ(200px);
}
ul li:nth-child(6){
    transform:rotateY(150deg)translateZ(200px);
}
ul li:nth-child(7){
    transform:rotateY(-30deg)translateZ(200px);
}
</style>
</head>

<body>
<div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>

</ul>
</div>
</body>
</html>





 

posted @ 2017-03-19 21:45  我正经七百九十九  阅读(210)  评论(0)  编辑  收藏  举报