css3如何简单的做一个立方体

最新推荐文章于 2023-03-13 22:43:54 发布

偶尔正经的小明

最新推荐文章于 2023-03-13 22:43:54 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/zhangbiaoxiaoming/article/details/83153447

版权

需要用到的知识点

transform属性

旋转
（1）rotateX() 方法

通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

（2）RotateY

通过 rotateX() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

（3）RotateZ

通过 rotateX() 方法，元素围绕其 Z 轴以给定的度数进行旋转。

平移
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。

translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。

translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。

缩放
scale3d(x,y,z) 定义 3D 缩放转换。

scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。

scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。

scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。

改变变化的基点
transform-origin 属性允许您改变被转换元素的位置。

2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Y 轴。

景深

景深是指相机对焦点前后相对清晰的成像范围。在光学中，尤其是录影或是摄影，是一个描述在空间中，可以清楚成像的距离范围。虽然透镜只能够将光聚到某一固定的距离，远离此点则会逐渐模糊，但是在某一段特定的距离内，影像模糊的程度是肉眼无法察觉的，这段距离称之为景深。当焦点设在超焦距处时，景深会从超焦距的一半延伸到无限远，对一个固定的光圈值来说，这是最大的景深。

perspective(n) 定义 3D 转换元素的透视视（设置景深）

3D属性transform-style
这个属性指定了子元素如何在空间中展示，只有两个属性值：flat（默认）和preserve-3d，flat 表示所有子元素在2D平面呈现，preserve-3d 表示所有子元素在3D平面呈现，（prederve是保护、维持的意思，preserve-3d就是保持三维空间的意思），当然如果我们想要3D的效果，就要使用 transform-style: preserve-3d;

这个属性只是针对设置属性元素的子元素如何展示，而对子元素的子元素无效，而且对于设置了overflow: hidden;的元素，设置3D效果会失效，道理很简单，跳出了父元素平面的子元素无法显示了，结果自然还是2D效果，应用于这个属性的元素我们称作“容器”，这个属性我们下面通过一个例子再来体会

如果你已经了解了那些知识，那么接下来我们来一起去做一个立方体吧。

其实很简单

1.通过HTML +css 先画出一个拆开的立方体的样子

2.把立方体叠起来。（通过旋转属性）

html 里面六个div表示六个面

下面为代码…

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
/*设置景深*/
perspective: 2000px;
}
.div1_1{
width: 2000px;
height: 2000px;
margin :auto;
position: relative;
/*为其子元素搭建3d环境*/
transform-style: preserve-3d;
/*设置转动的坐标点为立方体的中心*/
transform-origin: center center -250px;
/*初始转个角度效果明显一点 其实可以配合动画，或过度效果更好*/
transform: rotateY(45deg) rotateZ(45deg);
}
/*整体设置立方体每个面的大小*/
.div1_1 div{
width: 500px;
height: 500px;
background:lightcyan;
border: 1px solid blue;
position: absolute;

}

.forward{
/*上面的位置*/
top: 750px;
left: 750px;
}	
.back{
/*下面的位置*/
top: 750px;
left: 750px;
/*把下面向下移动（可以理解为向屏幕里面去） 移动过去
是反的。用手心手背来说明，比如你手心向上，向下移动 ，这时手心
变成为立方体的里面，手背是立方体的外面。我们需要把它绕正方形的
中心线旋转180deg。

*/
transform: translateZ(-500px) rotateX(180deg);
}
.top{
/*顶部位置*/
top: 250px;
left: 750px;
/*顶部沿着自己的底边向屏幕里面旋转90deg*/
transform-origin: bottom;
transform: rotateX(90deg);
}
.bottom{
/*底部位置*/
top: 1250px;
left: 750px;
/*底部沿着自己的上边往屏幕里面旋转90deg*/
transform-origin: top;
transform: rotateX(-90deg);
}
.left{
/*左边位置 */
top: 750px;
left: 250px;
/*左边沿着右边向屏幕里面旋转90deg*/
transform-origin: right;
transform: rotateY(-90deg);
}
.right{
/*右边位置*/
top: 750px;
left: 1250px;
/*右边沿着左边向屏幕里面旋转90deg*/
transform-origin: left;
transform: rotateY(90deg);
}

/*在这里要注意的是3d旋转时，绕y，z轴时逆时针为正方形，
绕x轴顺势针为正方向。
*/
</style>
</head>
<body>
<div class="div1">
<div class="div1_1">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="forward"></div>
<div class="back"></div>
</div>
</div>
</body>
</html>

效果图
在这里插入图片描述

偶尔正经的小明

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3如何简单的做一个立方体

需要用到的知识点transform属性旋转（1）rotateX() 方法通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。（2）RotateY通过 rotateX() 方法，元素围绕其 Y 轴以给定的度数进行旋转。（3）RotateZ通过 rotateX() 方法，元素围绕其 Z 轴以给定的度数进行旋转。平移translateX(x) 定义 3D 转化...
复制链接

扫一扫