[CSS]一起来画立方体: CSS transform属性
在学习transition, transform和translate这三个属性的时候,发现了一个例子包括了以下几个属性,觉得挺有意思,对学习这三个属性也很有帮助。
- transform
- translate
- rotate
- perspective
- perspective-origin
先看看MDN上一个CSS属性 perspective
的一个例子
https://developer.mozilla.org/zh-CN/docs/Web/CSS/perspective-origin
<div class="container">
<div class="cube pers">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
<style>
.pers {
perspective: 350px;
}
.container {
width: 200px;
height: 200px;
margin: 100px 0 0 100px;
border: none;
}
.cube {
width: 100%;
height: 100%;
backface-visibility: visible;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
width: 100px;
height: 100px;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
}
/* Define each face based on direction */
.front {
background: rgba(0, 0, 0, 0.3);
transform: translateZ(50px);
}
.back {
background: rgba(0, 255, 0, 1);
color: black;
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgba(196, 0, 0, 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgba(0, 0, 196, 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgba(196, 196, 0, 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgba(196, 0, 196, 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
</style>
效果图:
这个例子是HTML+CSS画出来的一个正方体,它是怎么做的呢?
HTML代码非常简单,一个container装了一个cube,这个cube有6个face。
CSS部分,每个face都是100×100 px的正方形,每个face的transform属性不一样,由不同的translate和rotate的值组成。尝试把每个face的transform属性去掉,来看看效果。
6个面堆叠在一起了,由些可见,正方体就是6个平面正方形经过旋转和平移,构成一个正方体,这个我们实际的操作也很一致。
先来看看立体的x y z坐标系:
结合坐标系:
- 正面front:把正方形沿z轴平移50px
transform: translateZ(50px);
- 背面back:把正方形沿z轴平移50px,并以y轴旋转顺时针180度
transform: rotateY(180deg) translateZ(50px);
- 右面right:把正方形沿z轴平移50px,并以y轴旋转顺时针90度
transform: rotateY(90deg) translateZ(50px);
- 左面left:把正方形沿z轴平移50px,并以y轴逆时针旋转90度
transform: rotateY(-90deg) translateZ(50px);
- 上面top:把正方形沿z轴平移50px,并以x轴顺时针旋转90度
transform: rotateX(90deg) translateZ(50px);
- 底面bottom:把正方形沿z轴平移50px,并以x轴逆时针旋转90度
transform: rotateX(-90deg) translateZ(50px);
只看概念是不是还是有点难想象呢?这时候,我们可以加上transition
属性,用动画效果还帮我们看看。
每一个face加一个触发事件,加上"transition : '2s'"
依次点击每个button,可以看到face从开始的位置变换到正方体的位置。transiton的作用就是给一个2s的时间,让我们看到变化的过程。
完整代码
<div class="container">
<div class="cube pers">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
<button onclick="changeFront()">Front</button>
<button onclick="changeBack()">Back</button>
<button onclick="changeRight()">Right</button>
<button onclick="changeLeft()">Left</button>
<button onclick="changeTop()">Top</button>
<button onclick="changeBottom()">Bottom</button>
<style>
.pers {
perspective: 350px;
}
.container {
width: 200px;
height: 200px;
margin: 100px 0 0 100px;
border: none;
}
.cube {
width: 100%;
height: 100%;
backface-visibility: visible;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
width: 100px;
height: 100px;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
background-color: thistle;
text-align: center;
}
/* Define each face based on direction */
</style>
<script>
function changeFront() {
let face = document.querySelector(".face.front");
face.style.background = 'rgba(0, 0, 0, 0.3)';
face.style.transform = 'translateZ(50px)';
face.style.transition = '2s'
}
function changeBack() {
let face = document.querySelector(".face.back");
face.style.background = 'rgba(0, 255, 0, 1)';
face.style.transform = 'rotateY(180deg) translateZ(50px)';
face.style.transition = '2s'
}
function changeRight() {
let face = document.querySelector(".face.right");
face.style.background = 'rgba(196, 0, 0, 0.7)';
face.style.transform = 'rotateY(90deg) translateZ(50px)';
face.style.transition = '2s'
}
function changeLeft() {
let face = document.querySelector(".face.left");
face.style.background = 'rgba(0, 0, 196, 0.7)';
face.style.transform = 'rotateY(-90deg) translateZ(50px)';
face.style.transition = '2s'
}
function changeTop() {
let face = document.querySelector(".face.top");
face.style.background = 'rgba(196, 196, 0, 0.7)';
face.style.transform = 'rotateX(90deg) translateZ(50px)';
face.style.transition = '2s'
}
function changeBottom() {
let face = document.querySelector(".face.bottom");
face.style.background = 'rgba(196, 0, 196, 0.7)';
face.style.transform = 'rotateX(-90deg) translateZ(50px)';
face.style.transition = '2s'
}
</script>
总结一下,rotate和translate都是transform的子属性,后面加上X Y Z代表以x轴、y轴、z轴为基础旋转/平移。
-
transform
: CSS变换函数,可以旋转,缩放,倾斜或平移给定元素。-
rotate
:正数时顺时针旋转,负数时逆时针旋转 -
translate
: 正数时正方向平移,负数时反方向平移
-
-
transition
: CSS过渡函数
另外,perspective属性:[CSS]一起来画立方体: CSS perspective属性
参考:
https://www.w3.org/TR/css-transforms-2
https://drafts.csswg.org/css-transitions
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition
发表评论 (审核通过后显示评论):