CSS 3D转换

最新推荐文章于 2024-07-22 09:42:47 发布

午睡的风

最新推荐文章于 2024-07-22 09:42:47 发布

阅读量248

点赞数

文章标签： css 3d css3

本文链接：https://blog.csdn.net/MX22724/article/details/128439470

版权

CSS3 支持 3D 转换。

相信学过数学的同学对这一概念多多少少是知道的，我们要想有一个3D空间效果，也就是立体空间感，比如：正方体、长方体……再比如我们生活所居住的房间也是3D立体空间的，主要有X轴、Y轴Z轴共同组成。

X轴：水平向右，X右边是正值，左边是负值。

Y轴：垂直向下，Y下面是正值，上面是负值。

Z轴：垂直屏幕，往外面是正值，往里面是负值。

通过 CSS transform 属性，你可以使用以下 3D 转换方法：

rotateX()
rotateY()
rotateZ()

示例原型：

original

rotateX() 方法

rotateX() 方法使元素绕其 X 轴旋转给定角度。

实例：

.rotateX {
  transform: rotateX(150deg);
}

效果：

rotateX

rotateY() 方法

rotateY() 方法使元素绕其 Y 轴旋转给定角度。

实例：

.rotateY {
  transform: rotateY(130deg);
}

效果：

rotateY

rotateZ() 方法

rotateZ() 方法使元素绕其 Z 轴旋转给定角度。

实例：

.rotateZ {
  transform: rotateZ(90deg);
}

效果：

rotateZ

透视

perspective 指定了观察者与 z = 0 平面的距离，使具有三维位置变换的元素产生透视效果。

简单理解就是将电脑屏幕当做一个平面，用户眼睛到屏幕的垂直方向。值越大用户与屏幕距离越远，视觉效果很小；值越小，3D 效果就越明显。

基本语法：

div{
  perspective：none | <length>
}

3D 旋转魔方

初始化布局

HTML 部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D盒子旋转</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<section>
			<div><img src="images/1.jpg" alt="" /></div>
			<div><img src="images/2.jpg" alt="" /></div>
			<div><img src="images/3.jpg" alt="" /></div>
			<div><img src="images/4.jpg" alt="" /></div>
			<div><img src="images/5.jpg" alt="" /></div>
			<div><img src="images/6.jpg" alt="" /></div>
		</section>
	</body>
</html>

CSS 部分：

* {
	/* 初始化 */
	margin: 0;
	padding: 0;
}

html {
	width: 100%;
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	/* 弹性布局 */
	display: flex;
	justify-content: center;
	align-items: center;
}

section {
	position: relative;
	width: 150px;
	height: 150px;
}

section div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: white;
}

section div img {
	width: 100%;
	height: 100%;
}

沿 Y 轴旋转，制作魔方盒子

CSS部分：

section {
	position: relative;
	width: 150px;
	height: 150px;
    /* 让子元素保留其3D位置 */
    transform-style: preserve-3d;
	/* 旋转容器 */
	animation: rotate 5s linear infinite;
}

section div:nth-child(1) {
	/* 前，向前移动75px */
	transform: translateZ(75px);
}

section div:nth-child(2) {
	/* 后，沿Y轴翻转180度，向前移动75px */
	transform: rotateY(180deg) translateZ(75px);
}

section div:nth-child(3) {
	/* 左，沿Y轴逆向翻转90度，向前移动75px */
	transform: rotateY(-90deg) translateZ(75px);
}

section div:nth-child(4) {
	/* 右，沿Y轴旋转90度，向前移动75px */
	transform: rotateY(90deg) translateZ(75px);
}

@keyframes rotate {
	0% {
		transform: rotateY(0);
	}
	100% {
		transform: rotateY(360deg);
	}
}

沿 X 轴旋转，制作魔方盒子

CSS 部分：

section div:nth-child(1) {
	/* 前，向前移动75px */
	transform: translateZ(75px);
}

section div:nth-child(2) {
	/* 后，沿Y轴翻转180度，向前移动75px */
	transform: rotateY(180deg) translateZ(75px);
}

section div:nth-child(3) {
	/* 左，沿Y轴逆向旋转90度，向前移动75px */
	transform: rotateY(-90deg) translateZ(75px);
}

section div:nth-child(4) {
	/* 右，沿Y轴旋转90度，向前移动75px */
	transform: rotateY(90deg) translateZ(75px);
}

section div:nth-child(5) {
	/* 上，沿X轴旋转90度，向前移动75px */
	transform: rotateX(90deg) translateZ(75px);
}

section div:nth-child(6) {
	/* 下，沿X轴逆向旋转90度，向前移动75px */
	transform: rotateX(-90deg) translateZ(75px);
}

@keyframes rotate {
	0% {
		transform: rotateX(0);
	}
	100% {
		transform: rotateX(360deg);
	}
}

同时沿 X 轴和 Y 轴旋转，生成魔方盒子

CSS 部分：

@keyframes rotate {
	0% {
		transform: rotateX(0) rotateY(0);
	}
	100% {
		transform: rotateX(360deg) rotateY(360deg);
	}
}

同时沿 X 轴和 Y 轴旋转，生成魔方盒子

CSS 部分：

@keyframes rotate {
	0% {
		transform: rotateX(0) rotateY(0);
	}
	100% {
		transform: rotateX(360deg) rotateY(360deg);
	}
}

午睡的风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 3D转换

css 3D转换
复制链接

扫一扫