700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 实现图片从远到近css 如何利用景深效果 使图片近大远小 我的demo怎么是近小远大

实现图片从远到近css 如何利用景深效果 使图片近大远小 我的demo怎么是近小远大

时间:2019-07-23 11:25:32

相关推荐

实现图片从远到近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);

}

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。