实现图片从远到近css,如何利用景深效果，使图片近大远小，我的demo怎么是近小远大，代码如下：...

想要的效果是，旋转到屏幕前变大，旋转到屏幕里面变小(近大远小)。

img_3D

@keyframes an1{

0%{

transform: rotateY(0deg)  ;

}

50%{

transform: rotateY(180deg)  ;

}

100%{

transform: rotateY(360deg) ;

}

}

.container{

margin: 200px auto;

perspective: 2000px;

transform-style: preserve-3d;

animation: an1 18s linear 0s infinite;

}

.container img{

width: 80px;

height: 100px;

margin: auto;

top: 0;

bottom: 0;

left: 0;

right: 0;

position: absolute;

}

.container img:nth-child(1){

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

}

.container img:nth-child(2){

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

}

.container img:nth-child(3){

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

}

.container img:nth-child(4){

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

}

.container img:nth-child(5){

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

}

.container img:nth-child(6){

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

}