css3D转换

最新推荐文章于 2024-10-03 20:14:40 发布

小小晨晨

最新推荐文章于 2024-10-03 20:14:40 发布

阅读量3.3k

点赞数

分类专栏： css3 html 文章标签：前端

本文链接：https://blog.csdn.net/m0_62519284/article/details/127542301

版权

css3 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

学号后四位：（必填）0116
邀请人ID：（非必填）

学有所思、学有所获、学有所得。在接下来的日子里，我们共同分享学习的点滴。CSDN针对我们石家庄邮电职业技术学院学习软件技术专业的同学们，特此建立了【校园前端学习分享】活动。大家可以交流在学习前端时的心得体会，也可以分享在日常学习生活中的前端课程作业，欢迎大家积极参与投稿！

你可以从以下几个方面着手（不强制），或者根据自己对话题主题的理解创作，参考如下：

提醒：在发布作品前请把不用的内容删掉

知识点

transform
向元素应用 2D 或 3D 转换。

translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective 规定 3D 元素的透视效果。

transform加到需要3D转换的元素上，perspective加到父元素上

项目名称及描述

CSS3D转换：主要是实现一些3维的旋转，相对于2D旋转，3D旋转多了一个z轴方向的变化，同时为了达到一种视觉效果，3D变换又不是简单的旋转，他还可以设置人眼到平面的距离，透视等等，从而让图像立起来。

项目代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		    .box {
			    width: 200px;
			    height: 200px;
			    position: relative;
			    perspective: 1000px;
			    transform-style: preserve-3d;
			    transform: translate(150px,100px) rotateX(-30deg) rotateY(30deg);
			}
			.front,.back,.left,.right,.top,.bottom{
				background-color: #ccc;
				font-size: 30px;
				text-align: center;
				line-height: 200px;
				position: absolute;
				border: 1px solid #fff;
				right: 0;
				bottom: 0;
				left: 0;
				top: 0;
				opacity: 0.5;
			}
			.front{
				transform: translateZ(100px);
			}
			.back{
				transform: translateZ(-100px);
			}
			.left{
				transform: rotateY(90deg) translateZ(-100px);
			}
			.right{
				transform: rotateY(90deg) translateZ(100px);
			}
			.top{
				transform: rotateX(90deg) translateZ(100px);
			}
			.bottom{
				transform: rotateX(90deg) translateZ(-100px);
			}
		  </style>

	</head>
	<body>
		<div class="box">
		    <div class="front">1</div>
		    <div class="back">2</div>
		    <div class="left">3</div>
		    <div class="right">4</div>
		    <div class="top">5</div>
		    <div class="bottom">6</div>
		</div>
	</body>
</html>

项目完成思路

1.用div写出6个面

2.确定整体的位置

3.先确定 ‘1’ 的位置

4.根据逻辑关系和你想要的大小，确定其他几面的位置

小小晨晨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

transform	向元素应用 2D 或 3D 转换。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective	规定 3D 元素的透视效果。