No.5 - 純 CSS 製做繞中軸旋轉的立方體

時間 2019-12-07

標籤 no.5 css 製做中軸旋轉立方體欄目 CSS 简体版

原文原文鏈接

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>

劃重點css

①給多個元素absolute造成重疊html

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

前後的不一樣，有巨大區別！3d

.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；code

而不是集體推動200px後在中點進行旋轉。orm

③margin:200px auto 0px;htm

④3D舞臺元素對視角的做用決定性（一個相似body的大背景座位舞臺元素起到對屏幕更真實的效果）blog

⑤utf-8

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;
}

1. 純CSS實現旋轉立方體
2. css製做3D立體旋轉效果
3. 繞軸旋轉
4. css3製做旋轉立方體相冊
5. CSS-旋轉立方體
6. 純CSS轉換實現旋轉的正立方體
7. DirectX 讓物體繞任意軸旋轉
8. 用css樣式製做3D立方體旋轉
9. 繞固定 xyz 軸旋轉
10. ue4 繞軸旋轉 RotateAngleAxis，SetActorLocation
更多相關文章...
• XPath 軸（Axes） - XPath 教程
• Hibernate的5種檢索方式 - Hibernate教程
• 漫談MySQL的鎖機制
• C# 中 foreach 遍歷的用法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。