css实现三维柯达旋转木马式彩色切片效果代码
代码语言:html
所属分类:三维
代码描述:css实现三维柯达旋转木马式彩色切片效果代码,鼠标移动可动态交互。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing:border-box; margin:0; padding:0; } html, body { height:100%; } body { display:grid; place-items:center; background-color:black; overflow:hidden; } .container { perspective:1000px; } .inner { --x-deg:-45deg; --y-deg:3deg; transform-style:preserve-3d; position:relative; display:grid; place-items:center; transform:rotateX(var(--x-deg)) rotateY(var(--y-deg)); } .element { width:200px; height:150px; background-color:hsl(40, 80%, 50%); position:absolute; box-shadow:inset 0 0 50px hsl(0, 0%, 0%); transform-origin:center; transition:350ms ease; } </style> </head> <body> <div class="container"> <div class="inner"> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="elemen.........完整代码请登录后点击上方下载按钮下载查看
网友评论0