html实现圆桶效果,3D圆柱体.html

3D旋转圆柱体

*{margin: 0;padding: 0}

div{

width: 105px;

height: 150px;

margin: 50px auto;

perspective: 1000px;

-webkit-perspective: 1000px;

transform-style: preserve-3d;

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

}

ul{

width: 105px;

height: 150px;

transform-style: preserve-3d;

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

transform: rotateX(-30deg);

animation: move 30s linear infinite;

}

@keyframes move {

from{

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

}

to{

transform:rotateX(-30deg) rotateY(360deg);

}

}

li{

position: absolute;

width: 100%;

height: 100%;

list-style: none;

background-size: 100% 100%;

}

li:first-child{

transform: translateZ(95px);

background-image: url("img/01.jpg");

background-repeat: no-repeat;

}

li:nth-child(2){

transform: rotateY(60deg) translateZ(95px);

background-image: url("img/02.jpg");

background-repeat: no-repeat;

}

li:nth-child(3){

transform: rotateY(120deg) translateZ(95px);

background-image: url("img/03.jpg");

background-repeat: no-repeat;

}

li:nth-child(4){

transform: rotateY(180deg) translateZ(95px);

background-image: url("img/04.jpg");

background-repeat: no-repeat;

}

li:nth-child(5){

transform: rotateY(240deg) translateZ(95px);

background-image: url("img/05.jpg");

background-repeat: no-repeat;

}

li:nth-child(6){

transform: rotateY(300deg) translateZ(95px);

background-image: url("img/06.jpg");

background-repeat: no-repeat;

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史