旋转木马 css,CSS:3D旋转木马效果

一个简单有趣的css动画

3D旋转木马效果

* {

margin: 0px;

padding: 0px;

}

#box {

width: 200px;

height: 300px;

animation: rotate 20s linear infinite;

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto auto;

transform-style: preserve-3d;

}

img {

width: 100%;

position: absolute;

}

img:nth-child(1) {

transform: rotateY(0) translateZ(600px);

}

img:nth-child(2) {

transform: rotateY(36deg) translateZ(600px);

}

img:nth-child(3) {

transform: rotateY(72deg) translateZ(600px);

}

img:nth-child(4) {

transform: rotateY(108deg) translateZ(600px);

}

img:nth-child(5) {

transform: rotateY(144deg) translateZ(600px);

}

img:nth-child(6) {

transform: rotateY(180deg) translateZ(600px);

}

img:nth-child(7) {

transform: rotateY(216deg) translateZ(600px);

}

img:nth-child(8) {

transform: rotateY(252deg) translateZ(600px);

}

img:nth-child(9) {

transform: rotateY(288deg) translateZ(600px);

}

img:nth-child(10) {

transform: rotateY(324deg) translateZ(600px);

}

@keyframes rotate {

0% {

transform: rotateX(0) rotateY(0);

}

25% {

transform: rotateX(20deg) rotateY(180deg);

}

50% {

transform: rotateX(0) rotateY(360deg);

}

75% {

transform: rotateX(-20deg) rotateY(540deg);

}

100% {

transform: rotateX(0) rotateY(720deg);

}

旋转木马 css,CSS:3D旋转木马效果相关推荐

php3d按钮,CSS实现3D按钮效果
这次给大家带来CSS实现3D按钮效果,CSS实现3D按钮效果的注意事项有哪些,下面就是实战案例,一起来看一下. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改bo ...
html5实现立体照片墙效果,利用css制作3D照片墙效果
利用css制作3D照片墙,具体代码如下所示: 无标题文档以上代码是准备工作,在html代码的body主体中放了一个div,里面包着你想要显示在照片墙上的照片,数量可以任意.接着开始着手写样式. bo ...
css书本效果,如何使用纯CSS实现3D书本效果
如何使用纯CSS实现3D书本效果发布时间:2020-07-30 10:27:15 来源:亿速云阅读:59 作者:Leah 这期内容当中小编将会给大家带来有关如何使用纯CSS实现3D书本效果,文章内 ...
html鼠标悬停效果_【开发小技巧】023—如何使用HTML和CSS实现3D文字效果
来源 | https://www.geeksforgeeks.org/create-a-3d-text-effect-using-html-and-css/3D文字效果是网页设计领域中最常用的文字效果 ...
HTML+CSS做出3D照片效果（HTML+CSS for 3D photo effect）
2022.10.14大家好,我最近看到一个关于用HTML+CSS实现的3D照片觉得非常好看,如图: Hello everyone, I recently saw a 3D photo about us ...
html实现3d转换效果,教你如何用CSS实现3D翻转效果的菜单
随着浏览器技术的进步,CSS动画技术已经不是只那些简单的淡入淡出效果或幻灯片效果,它们能做很多更强大的事情.我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简 ...
纯CSS实现3D按钮效果
今天分享一个用纯CSS实现的3D按钮. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值. 让人感觉有一种按钮被按下的感觉.css代码 ...
CSS实现3D书本效果
话不多说,先来看一下效果图源代码如下 <!DOCTYPE html> <html lang="en"> <head><meta char ...
用纯CSS实现3D立方体效果
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
用CSS实现3D的效果（水滴）

旋转木马 css,CSS:3D旋转木马效果

旋转木马 css,CSS:3D旋转木马效果相关推荐

最新文章

热门文章