css实现3D魔方效果

最新推荐文章于 2024-04-15 04:47:11 发布

粉色水杯

最新推荐文章于 2024-04-15 04:47:11 发布

阅读量152

点赞数

文章标签： css 3d 前端

本文链接：https://blog.csdn.net/linxuanasd/article/details/125387666

版权

这篇博客展示了如何利用CSS技术实现一个令人惊叹的3D魔方效果。通过CSS的3D转换和布局技巧，作者详细介绍了创建魔方的步骤，并提供了相应的index.css和index.html代码示例。

摘要由CSDN通过智能技术生成

效果展示

index.css

*{
    margin: 0;
    padding: 0;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background: radial-gradient(rgb(243, 210, 252) 90%,rgb(249, 73, 240));
}
.container{
    position: relative;
    width: 398px;
    height: 398px;
    transform-style: preserve-3d;
    
    animation: animate 5s linear alternate infinite;
}
.container div{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}
.container div:nth-child(1){
    transform: translateZ(199px);
}
.container div:nth-child(2){
    transform:rotateY(180deg) translateZ(199px);
}
.container div:nth-child(3){