CSS实现旋转木马效果 |
您所在的位置：网站首页 › 旋转木马怎么接线 › CSS实现旋转木马效果 |
CSS实现旋转木马效果
|
本文介绍如何使用CSS实现旋转木马效果
一、效果图 2.构造9个面，给父容器加相对定位，子元素加绝对定位，让子项叠加在一起（transform-style: preserve-3d;用来显示3D效果） 1 2 3 4 5 6 7 8 9 #box ul{width: 100px;height: 160px;margin: 137px auto;position: relative;transform-style: preserve-3d;transition: 5s;} #box ul li{width: 100%;height: 100%;position: absolute;left: 0;top: 0;text-align: center;line-height: 170px;}3.利用transform的translate和rotate实现旋转木马，因为有9个面，所以将第二面绕y轴旋转40度，第三个面旋转80度，接下来的子项旋转每个加40deg，然后让它们沿着z轴位移，因为每个面已经旋转了不同的角度，所以它们会朝着各自的方向位移。 #box ul li:nth-of-type(1){background-color: red;transform: rotateY(0) translateZ(137px);} #box ul li:nth-of-type(2){background-color: blue; transform: rotateY(40deg) translateZ(137px);} #box ul li:nth-of-type(3){background-color: green; transform: rotateY(80deg) translateZ(137px);} #box ul li:nth-of-type(4){background-color: hotpink; transform: rotateY(120deg) translateZ(137px);} #box ul li:nth-of-type(5){background-color: yellow; transform: rotateY(160deg) translateZ(137px);} #box ul li:nth-of-type(6){background-color: gray; transform: rotateY(200deg) translateZ(137px);} #box ul li:nth-of-type(7){background-color: indigo; transform: rotateY(240deg) translateZ(137px);} #box ul li:nth-of-type(8){background-color: maroon; transform: rotateY(280deg) translateZ(137px);} #box ul li:nth-of-type(9){background-color: royalblue; transform: rotateY(320deg) translateZ(137px);}4.利用伪类hover实现当鼠标移入的时候，容器绕y轴旋转360度，这样就实现了旋转木马效果 #box:hover ul{transform: rotateY(360deg);}四、完整代码 Document *{margin: 0;padding: 0;} ul{list-style: none;} #box{width: 500px;height: 500px;border:1px black solid;margin: 50px auto;perspective: 700px;perspective-origin: top;background: rgba(0, 0, 0, 0.1);} #box ul{width: 100px;height: 160px;margin: 137px auto;position: relative;transform-style: preserve-3d;transition: 5s;} #box ul li{width: 100%;height: 100%;position: absolute;left: 0;top: 0;text-align: center;line-height: 170px;} #box ul li:nth-of-type(1){background-color: red;transform: rotateY(0) translateZ(137px);} #box ul li:nth-of-type(2){background-color: blue; transform: rotateY(40deg) translateZ(137px);} #box ul li:nth-of-type(3){background-color: green; transform: rotateY(80deg) translateZ(137px);} #box ul li:nth-of-type(4){background-color: hotpink; transform: rotateY(120deg) translateZ(137px);} #box ul li:nth-of-type(5){background-color: yellow; transform: rotateY(160deg) translateZ(137px);} #box ul li:nth-of-type(6){background-color: gray; transform: rotateY(200deg) translateZ(137px);} #box ul li:nth-of-type(7){background-color: indigo; transform: rotateY(240deg) translateZ(137px);} #box ul li:nth-of-type(8){background-color: maroon; transform: rotateY(280deg) translateZ(137px);} #box ul li:nth-of-type(9){background-color: royalblue; transform: rotateY(320deg) translateZ(137px);} #box:hover ul{transform: rotateY(360deg);} 1 2 3 4 5 6 7 8 9 |
二、知识点 1.perspective : 离屏幕多远的距离去观察元素，值越大幅度越小。 2.perspective-origin : 景深-基点位置，观察元素的角度。(transform-origin : x y z) 3.transform-style : 3D空间 (flat默认值2d、preserve-3d 3d，产生一个三维空间) 4.translate : 位移 transform:translate(100px,100px); : 两个值 分别对应 x 和 y。 transform:translateX(100px); transform:translateY(100px); transform:translateZ(100px); ( 3d ) 5. rotate : 旋转 transform:rotate(num) num是旋转的角度 40deg rotateX() ( 3d ) rotateY() ( 3d ) rotateZ() 三、实现步骤 1.先构建一个舞台，用来放置容器，展示效果（给盒子添加perspective加一个3D眼镜，perspective-origin用来确定观察的角度）【本文地址】
今日新闻 |
推荐新闻 |