三维立方体(基于CSS3 transform动画)

最新推荐文章于 2023-04-03 10:17:21 发布

chen__cheng

最新推荐文章于 2023-04-03 10:17:21 发布

阅读量166

点赞数

CC 4.0 BY-SA版权

分类专栏： # 案例文章标签： CSS3

本文链接：https://blog.youkuaiyun.com/chen__cheng/article/details/116567755

案例专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种使用CSS transform属性实现的3D翻转效果。通过设置不同的旋转角度和透视距离，可以让多个div元素呈现出立体翻转的效果。具体包括如何设置初始样式、旋转基点及响应鼠标悬停事件时的动画变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果预览：
transform_21
实现思路和立体按钮的实现思路是一致的立体按钮基于动画transform
实现代码：
HTML

<main>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</main>

css

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2C3A47 ;
}

/*设置父盒子最初的样式*/
main {
    width: 200px;
    height: 200px;
    border: 1px solid #fff;
    transform-style: preserve-3d;
    /*改变元素旋转基点*/
    transform-origin: center center 100px;
    transform: perspective(900px) rotateX(-45deg);
    transition: all 1s;
}

body:hover main {
    transform:  perspective(900px) rotateX(90deg) rotateY(360deg);
}
main div {
    width: 200px;
    height: 200px;
    font-size: 3em;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    transform-origin: center center 100px;
    /*让元素透视*/
    opacity: .8;
}

main div:nth-child(1) {
     background-color: #6c5ce7;
    transform: rotateY(90deg);
 }

main div:nth-child(2) {
    background-color: #ffeaa7;
    transform: rotateY(180deg);
}

main div:nth-child(3) {
    background-color: #fd79a8;
    transform: rotateY(270deg);
}

main div:nth-child(4) {
    background-color: #e84393;
    transform: rotateY(360deg);
}

main div:nth-child(5) {
    /*改变元素旋转基点*/
    transform-origin: top;
    background-color: #e17055;
    transform: rotateX(90deg);
}

main div:nth-child(6) {
    /*改变元素旋转基点*/
    transform-origin: bottom;
    background-color: #dfe6e9;
    transform: rotateX(-90deg);
}