CSS 3D转换

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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值