南昌网站关键词优化,网站推广的方法和渠道,wordpress 调用分类目录下的文章,黄冈市住房和城乡建设厅网站一.效果预览图 二.实现思路 1.实现旋转木马效果的第一步是先准备好自己需要的图片#xff0c;创建html文件 2.旋转木马的实现#xff0c;关键点在3D形变和关键帧动画。 3.步骤#xff0c;定义一个div使其居中#xff0c;#xff0c;把图片放进div盒子里#xff0c;因为图…一.效果预览图 二.实现思路 1.实现旋转木马效果的第一步是先准备好自己需要的图片创建html文件 2.旋转木马的实现关键点在3D形变和关键帧动画。 3.步骤定义一个div使其居中把图片放进div盒子里因为图片需要3D形变所以要给div设置3D环境给图片设置定位或者使用弹性布局使其在相对的位置要控制图片一定要在div中否则关键帧动画旋转的时候整体会是倾斜的根据图片的数量合理控制图像的旋转角度通常使用 360度/图片数量需要旋转的角度最后设置z轴的移动距离和关键帧动画。 三.相关代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin: 0;padding: 0;perspective: 500000px;transform-style: preserve-3d;}.wp{width: 800px;height: 400px;perspective: 500000px;transform-style: preserve-3d;position: relative;margin: 200px auto;animation: xz 10s infinite linear;}img{width: 180px;height: 300px;position: absolute;left: 310PX;}.wp img:nth-child(1){transform: rotateY(0) translateZ(400px);}.wp img:nth-child(2){transform: rotateY(-30deg) translateZ(400px);}.wp img:nth-child(3){transform: rotateY(-60deg) translateZ(400px);}.wp img:nth-child(4){transform: rotateY(-90deg) translateZ(400px);}.wp img:nth-child(5){transform: rotateY(-120deg) translateZ(400px);}.wp img:nth-child(6){transform: rotateY(-150deg) translateZ(400px);}.wp img:nth-child(7){transform: rotateY(-180deg) translateZ(400px);}.wp img:nth-child(8){transform: rotateY(-210deg) translateZ(400px);}.wp img:nth-child(9){transform: rotateY(-240deg) translateZ(400px);}.wp img:nth-child(10){transform: rotateY(-270deg) translateZ(400px);}.wp img:nth-child(11){transform: rotateY(-300deg) translateZ(400px);}.wp img:nth-child(12){transform: rotateY(-330deg) translateZ(400px);}keyframes xz{0%{transform: rotateX(-10deg);}100%{transform: rotateX(-10deg) rotateY(360deg);}}/style
/head
bodydiv classwpimg src./image/wallhaven-pkgkkp.png altimg src./image/wallhaven-pkgkkp.png altimg src./image/wallhaven-pkgkkp.png altimg src./image/wallhaven-pkgkkp.png altimg src./image/wallhaven-pkgkkp.png altimg src./image/wallhaven-pkgkkp.png altimg src./image/wallhaven-pkgkkp.png altimg src./image/wallhaven-pkgkkp.png altimg src./image/wallhaven-pkgkkp.png altimg src./image/wallhaven-pkgkkp.png altimg src./image/wallhaven-pkgkkp.png altimg src./image/wallhaven-pkgkkp.png alt/div
/body
/html
