CSS 3D炫酷的 旋转魔方
程序员文章站
2022-05-26 19:42:56
...
最近在复习HTML 和 CSS，把以前做的一些小例子拿出来分享一下，也加深自己的印象
css 是通过 transform 来实现3D旋转的，看代码之前，先复习一下相关知识
- transform-origin 规定了转换的中心点 ，定义场景，也就是灭点，2D 转换可以设置 x轴和y轴，3D转换还能设置 z轴 语法：transform-origin: x-axis y-axis z-axis;
- transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。flat 子元素将不保留其 3D 位置。preserve-3d 子元素将保留其 3D 位置。
- perspective 定义 3D 元素距视图的距离
- perspective-origin 定义透视方位，相当于从上下左右那个方向透视，语法 perspective-origin: x-axis y-axis;
3D旋转魔方用到了
perspective 给魔方一个透视的距离
transform-style 保留每一个魔方每个面的3D位置
transform-origin 每个魔方面旋转的的基点位置，和整个魔方旋转的基点位置
transform: translate3d(x,y,z) 3D转换
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS 3D魔方</title>
<meta charset="utf-8">
</head>
<style>
.bigbox{
perspective: 500px;
/* 定义场景，灭点为500 */
}
.box{
margin: 0 auto;
margin-top: 200px;
width: 200px;
height: 200px;
background: red;
position: relative;
transition: all 5s ease;
transform-style: preserve-3d;
transform-origin: center center 100px;
}
.box:hover{
transform: rotateX(360deg)rotateY(360deg)rotateZ(360deg);
}
.box div{
width: 200px;
height: 200px;
position: absolute;
bottom: 0;
right: 0;
font-size: 50px;
text-align: center;
line-height: 200px;
}
/* top */
.box div:nth-child(1){
top: -200px;
background: rgba(255, 0, 0, 0.5);
transform-origin: bottom;
transform: rotateX(-90deg)
}
/* bottom */
.box div:nth-child(2){
top: 200px;
background: rgba(0, 255, 0, 0.5);
transform-origin: top;
transform: rotateX(90deg)
}
/* right */
.box div:nth-child(3){
right: -200px;
background: rgba(0, 0, 255, 0.5);
transform-origin: left;
transform: rotateY(-90deg)
}
/* left */
.box div:nth-child(4){
left: -200px;
background: rgba(255, 255, 0, 0.5);
transform-origin: right;
transform: rotateY(90deg)
}
/* font */
.box div:nth-child(5){
background: rgba(255, 0, 255, 0.5);
transform: translate3d(0, 0, 200px);
}
/* behind */
.box div:nth-child(6){
background: rgba(0, 255, 555, 0.5);
transform: translate3d(0, 0, 0);
}
h3{
text-align: center;
}
</style>
<body>
<h3>将鼠标移入盒子看3D效果</h3>
<div class="bigbox">
<div class="box">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
</div>
</div>
</body>
</html>代码跑一遍，哇塞，想必第一次见到这种效果 ，想来段freestyle
上一篇： 链式栈C语言实现