想要的效果是，旋轉到屏幕前變大，旋轉到屏幕里面變小（近大遠?。?lt;!DOCTYPE html><html><head>? ? <meta charset="UTF-8">? ? <title>img_3D</title></head><style type="text/css">? ? @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);? ? }</style><body>? ? <div class="container">? ? ? ? <img src="1.png">? ? ? ? <img src="1.png">? ? ? ? <img src="1.png">? ? ? ? <img src="1.png">? ? ? ? <img src="1.png">? ? ? ? <img src="1.png">? ? </div></body></html>
2 回答
- 2 回答
- 0 關注
- 2159 瀏覽
添加回答
舉報
0/150
提交
取消