實現立方體旋轉

時間 2019-11-11

標籤實現立方體旋轉简体版

原文原文鏈接

HTML部分：ide

<body class="body">3d

<div class="rect-wrap"> orm

<div class="container"> animation

<div class="top slide">1</div> it

<div class="bottom slide">2</div>io

<div class="left slide">3</div>form

<div class="right slide">4</div>class

<div class="front slide">5</div>容器

<div class="back slide">6</div>transform

</div>

</body>

CSS:

<style>

.rect-wrap {

position: relative;

perspective: 2000px;

}

.container {

width: 400px;

height: 400px;

transform-style: preserve-3d;

transform-origin: 50% 50% 100px; /* //設置3d空間的原點在平面中心再向Z軸移動200px的位置 */

/* left: 50%;

margin-left: -200px; */

top: 100px;

}

.slide {

width: 200px;

height: 200px;

position: absolute;

background: #000;

line-height: 200px;

text-align: center;

color: #fff;

font-size: 30px;

font-weight: bold;

}

.top {

left: 100px;

top: -100px;

transform: rotateX(-90deg);

transform-origin: bottom;

background: red;

}

.bottom {

left: 100px;

bottom: -100px;

transform: rotateX(90deg);

transform-origin: top;

background: grey;

}

.left {

left: -100px;

bottom: 100px;

transform: rotateY(90deg);

transform-origin: right;

background: green;

}

.right {

left: 300px;

bottom: 100px;

transform: rotateY(-90deg);

transform-origin: left;

background: yellow;

}

.front {

left: 100px;

top: 100px;

transform: translateZ(200px);

background: black;

}

.back {

left: 100px;

top: 100px;

transform: translateZ(0);;

background: blue;

}

@keyframes rotate-frame {

0% {

transform: rotateX(0deg) rotateY(0deg);

}

10% {

transform: rotateX(0deg) rotateY(180deg);

}

20% {

transform: rotateX(-180deg) rotateY(180deg);

}

30% {

transform: rotateX(-360deg) rotateY(180deg);

}

40% {

transform: rotateX(-360deg) rotateY(360deg);

}

50% {

transform: rotateX(-180deg) rotateY(360deg);

}

60% {

transform: rotateX(90deg) rotateY(180deg);

}

70% {

transform: rotateX(0) rotateY(180deg);

}

80% {

transform: rotateX(90deg) rotateY(90deg);

}

90% {

transform: rotateX(90deg) rotateY(0);

}

100% {

transform: rotateX(0) rotateY(0);

}

.container{

animation: rotate-frame 30s linear infinite;

}

</style>

1.3維空間圖

電腦屏幕中心爲原點，橫向爲X軸，縱向爲Y軸，人臉的方向爲Z軸；
translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)：定義位置的移動距離
rotate(angle)、rotateX(a)、rotateY(a)、rotateZ(a)、rotate3d(x,y,z,angle)：定義元素的旋轉角度。

2.perspective屬性
perspective 屬性定義 3D 元素距視圖的距離，以像素計。該屬性容許您改變 3D 元素查看 3D 元素的視圖。
當爲元素定義 perspective 屬性時，其子元素會得到透視效果，而不是元素自己。
註釋：perspective 屬性隻影響 3D 轉換元素。
提示：請與 perspective-origin 屬性一同使用該屬性，這樣您就可以改變 3D 元素的底部位置。

3.transform-style屬性
transform-style: flat|preserve-3d; 默認值爲flat,表示子元素以2D平面呈現；perserve-3d表示子元素以3D平面呈現

4.transform-origin屬性
transform-origin 屬性容許您改變被轉換元素的位置（能夠理解爲元素以哪一個位置爲旋轉原點）。
語法：

transform-origin: x-axis y-axis z-axis;

相關標籤/搜索

每日一句

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