CSS 3D动画 大小可开合正方体 |
您所在的位置：网站首页 › 正方体动漫图片 › CSS 3D动画 大小可开合正方体 |
CSS 3D动画 大小可开合正方体
|
先看一下效果动态图
HTML中的图片来自百度图片，大家可以直接替换成自己喜欢的图片。，主要的是CSS的导入不要弄错了，不然不会显示出来效果。 DOCTYPE html> CSS动画 CSSCSS文件与HTML文件为同级目录，并且命名为style.css，背景图片（background)的图片这里没有使用网络上的图片，大家可以也在同级目录下保存一张图片，命名为bg.png即可，也可以通过控制CSS属性animation的秒数来控制转动速度和transition的秒数来控制正方体的分开速度 *{ padding: 0; margin: 0; list-style: none; } html,body{ width: 100%; height: 100%; overflow: hidden; background: url(./bg.png)no-repeat; background-size: 100%; } .main{ width: 100%; height: 100%; perspective: 800px; } .cubebox{ width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -100px; transform-style: preserve-3d; } .cube{ width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; transform-style: preserve-3d; transform: rotateX(-10deg) rotateY(45deg); animation: move 8s linear infinite; } .bg{ width: 100%; height: 100%; object-fit: fill; } .cube li{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: all 1s ease-in-out; } .cube li img{ display: block; width: 100%; height: 100%; /* border-radius: 50%; */ opacity:0.8; } .bigcube li img{ opacity: 1; } .cube li:nth-child(1){ transform: rotateX(0deg) translateZ(50px); } .cube li:nth-child(2){ transform: rotateX(180deg) translateZ(50px) rotateZ(180deg); } .cube li:nth-child(3){ transform: rotateX(-90deg) translateZ(50px); } .cube li:nth-child(4){ transform: rotateX(90deg) translateZ(50px); } .cube li:nth-child(5){ transform: rotateY(-90deg) translateZ(50px) ; } .cube li:nth-child(6){ transform: rotateY(90deg) translateZ(50px); } .bigcube{ width: 200px; height: 200px; margin: -100px 0 0 -100px; } .bigcube li:nth-child(1){ transform: rotateX(0deg) translateZ(100px); } .bigcube li:nth-child(2){ transform: rotateX(180deg) translateZ(100px) rotateZ(180deg) ; } .bigcube li:nth-child(3){ transform: rotateX(-90deg) translateZ(100px); } .bigcube li:nth-child(4){ transform: rotateX(90deg) translateZ(100px); } .bigcube li:nth-child(5){ transform: rotateY(-90deg) translateZ(100px) ; } .bigcube li:nth-child(6){ transform: rotateY(90deg) translateZ(100px); } @keyframes move{ 0%{ transform: rotateX(-13deg) rotateY(0deg); } 100%{ transform: rotateX(-13deg) rotateY(360deg); } } .bigcube:hover li:nth-child(1){ transform: rotateX(0deg) translateZ(200px) scale(1.1); } .bigcube:hover li:nth-child(2){ transform: rotateX(180deg) translateZ(200px) rotateZ(180deg) scale(1.1); } .bigcube:hover li:nth-child(3){ transform: rotateX(-90deg) translateZ(200px) scale(1.1); } .bigcube:hover li:nth-child(4){ transform: rotateX(90deg) translateZ(200px) scale(1.1); } .bigcube:hover li:nth-child(5){ transform: rotateY(-90deg) translateZ(200px) scale(1.1); } .bigcube:hover li:nth-child(6){ transform: rotateY(90deg) translateZ(200px) scale(1.1); } 最后这里面采集得图片只有背景的是来自本地的，其它的是来自网页，代码可直接复制使用。可以换成你喜欢的图片，当然也可以添加一些文字描述在里面，看各位小伙伴的需要了。本次CSS的分享到此结束，感谢观看 |
【本文地址】