No.5 - 纯 CSS 制作绕中轴旋转的立方体

最新推荐文章于 2024-01-12 16:07:34 发布

会做饭的技术男

最新推荐文章于 2024-01-12 16:07:34 发布

阅读量287

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=hjhi0khkahhj&title=No.5+-+%E7%BA%AF+CSS+%E5%88%B6%E4%BD%9C%E7%BB%95%E4%B8%AD%E8%BD%B4%E6%97%8B%E8%BD%AC%E7%9A%84%E7%AB%8B%E6%96%B9%E4%BD%93

版权

前端专栏收录该内容

2507 篇文章 13 订阅

订阅专栏

body{
    background-color: #000;
    margin: 0;
    padding: 0;
}
main{
    perspective: 800px;
}
.cube{
    transform-style: preserve-3d;
    position: relative;
    margin: 200px auto 0px;
    width: 400px;
    height: 400px;
    animation: spin 8s linear infinite;
    animation-play-state: paused;
}
.cube>div{
    background-color: blue;
    opacity: 0.3;
    position: absolute;
    outline: 3px solid #0af;
    width: 400px;
    height:400px;
}
.cube>div:nth-child(1){
    transform: translateZ(200px);
}
.cube>div:nth-child(2){
    transform: rotateY(180deg) translateZ(200px);
}
.cube>div:nth-child(3){
    transform: rotateY(90deg) translateZ(200px);
}
.cube>div:nth-child(4){
    transform: rotateY(-90deg) translateZ(200px);
}
.cube>div:nth-child(5){
    transform: rotateX(90deg) translateZ(200px);
}
.cube>div:nth-child(6){
    transform: rotateX(-90deg) translateZ(200px);
}
@keyframes spin{
    100%{transform: rotateY(-360deg);}
}
.cube:hover{
    animation-play-state: running;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>纯 CSS 制作绕中轴旋转的立方体</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<main>
    <div class="cube">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</main>
</body>
</html>

划重点

①给多个元素absolute形成重叠

②transform: rotateY(180deg) translateZ(200px);和transform: translateZ(200px) rotateY(180deg);

先后的不同，有巨大区别！

.cube>div:nth-child(1){
    transform: translateZ(200px);
}
.cube>div:nth-child(2){
    transform: rotateY(180deg) translateZ(200px);
}
.cube>div:nth-child(3){
    transform: rotateY(90deg) translateZ(200px);
}
.cube>div:nth-child(4){
    transform: rotateY(-90deg) translateZ(200px);
}
.cube>div:nth-child(5){
    transform: rotateX(90deg) translateZ(200px);
}
.cube>div:nth-child(6){
    transform: rotateX(-90deg) translateZ(200px);
}

先在中点进行旋转，随后分别向各自变化后的Z方向推进200px；

而不是集体推进200px后在中点进行旋转。

③margin:200px auto 0px;

④3D舞台元素对视角的作用决定性（一个类似body的大背景座位舞台元素起到对屏幕更真实的效果）

⑤

animation: name duration timing-function delay iteration-count direction;
animation-play-state: paused;
animation-play-state: running;

@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

.cube:hover{
    animation-play-state: running;
}

会做饭的技术男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录