想要的效果是，旋转到屏幕前变大，旋转到屏幕里面变小（近大远小）。<!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 关注
- 2108 浏览
添加回答
举报
0/150
提交
取消