css实现3d正方体旋转

<style>*{margin: 0;padding: 0;}body{/* 背景图片 */background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201709%2F08%2F20170908233501_rSmCt.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634291823&t=01a87d3496b1080c291f96a46c087df2') no-repeat center;background-size: 100%;}.bj{position: relative;width: 300px;height: 300px;margin: 200px auto;transform-style: preserve-3d;animation: as 5s linear infinite;}/* 内部小方块 */.a{position: absolute;width: 300px;height: 300px;border: 1px solid black;background-color: thistle;opacity: .5;transition: 1s;}/* 外部大方块 */.b{/* background: url("b64d2cfd2cc87971a37862f60a50c80.jpg") no-repeat center; */background-color: aqua;background-size: cover;box-shadow: 3px 3px 10px 3px white;opacity: 1;}/* 第一个和第七个div */.a:nth-child(1),.a:nth-child(7){transform: rotateY(90deg) translateZ(150px);          }/* 第二个和第八个div */.a:nth-child(2),.a:nth-child(8){transform: rotateY(-90deg) translateZ(150px);}/* 第三个和第九个div */.a:nth-child(3),.a:nth-child(9){transform: translateZ(150px);}/* 第四个和第十个div */.a:nth-child(4),.a:nth-child(10){transform: translateZ(-150px);}.a:nth-child(5),.a:nth-child(11){transform: rotateX(90deg) translateZ(150px);}.a:nth-child(6),.a:nth-child(12){transform: rotateX(-90deg) translateZ(150px);}.bj:hover .a:nth-child(7){transform: rotateY(90deg) translateZ(250px);}.bj:hover .a:nth-child(8){transform: rotateY(-90deg) translateZ(250px);}.bj:hover .a:nth-child(9){transform: translateZ(250px);}.bj:hover .a:nth-child(10){transform: translateZ(-250px);}.bj:hover .a:nth-child(11){transform: rotateX(90deg) translateZ(250px);}.bj:hover .a:nth-child(12){transform: rotateX(-90deg) translateZ(250px);}.bj:hover{animation: as2 3s linear infinite;}.bj:hover .a{box-shadow: 5px 5px 6px 6px white;}@keyframes as {0%{transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg);}100%{transform :rotateX(10deg) rotateY(360deg) rotateZ(0deg);}}@keyframes as2 {0%{transform: rotateX(0deg) rotateY(0deg);}100%{transform :rotateX(360deg) rotateY(360deg) ;}}</style>

<body><div class="bj"><div class="a"></div><div class="a"></div><div class="a"></div><div class="a"></div><div class="a"></div><div class="a"></div><div class="a b"></div><div class="a b"></div><div class="a b"></div><div class="a b"></div><div class="a b"></div><div class="a b"></div></div>
</body>

css实现3d正方体旋转相关推荐

html 运行css实现3D正方体旋转制作进阶，调整图大小及远近（二）
css中的transform 1.通过其中的scale调整大小 2.通过translatez.translatex translatey调整远近.
纯CSS实现3D正方体动画效果
目录前言正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化总结前言纯CSS实现3D正方体动画效果,此方法是通过transf ...
3d正方体旋转相册代码_3d旋转正方体的多种html和css制作方法和相关知识复习讲解
1 说明: 1.1 推荐指数:★★★★ 1.2 有点长,适合收藏,慢慢仔细阅读和分析代码. 1.3 推荐:谷歌浏览器和微软vscode编辑器. 1.4 部分代码来源于免费开源的网络,具体不详,经自己加 ...
CSS实现3D正方体动态旋转效果【源码+GIF图】
小伙伴们看到那些页面上炫酷的正方体,是不是都觉得美美的很精致,很想自己动手写一个属于自己的,但是又学业繁忙而找不到时间去实现,今天我就为大家写一个,哒哒哒,废话不多说,开始上代码~ 额,要不先说说它 ...
css实现3D立方体旋转特效
先来看运行后出来的效果它是在不停运行的一个立方体先来看html部分的代码 <div class="rect-wrap"> <!--舞台元素,设置perspec ...
利用css制作3d图片旋转_练习
效果: 鼠标触碰时(停止旋转并高亮): 代码: <!DOCTYPE html> <html lang="en"> <head><meta ...
html正方形相册,3D正方体旋转相册.html
自己随便改名都可以,会显示在标题 body{ background:rgba(0, 0, 0, 1.0); /*更改背景颜色*/ } * { margin:0; padding:0; } video{ ...
C# WPF 3D正方体旋转
1.示例代码 <Grid><Grid.ColumnDefinitions><ColumnDefinition Width="*"/><Co ...
html5+css3实现3D正方体动画相册2种+3D旋转木马立体动画相册+表白文字加动画爱心+炫酷万花筒五件套含音乐
1.html+css+jquery实现,电脑和手机均已兼容,完整源码下载 2.3D旋转木马立体动画相册 3.3D正方体旋转动画相册2中实现方式: 第一种方式: 第二种方式: 4.表白示爱文字+动画爱心 ...

css实现3d正方体旋转

css实现3d正方体旋转相关推荐

最新文章

热门文章