CSS 3D

CSS3 添加了三大属性：过渡、动画、变形

过渡：

transition：过渡属性过渡时间缓冲描述延迟时间

如：transition：all 1s ease 1s；

动画：

声明动画：

@keyframes 动画名{  
    //等价于0%
    from {
    }
    40% {
    }
    //等价于100%
    to {
    }
}

调用动画

animation：动画名动画时间缓冲描述延迟时间动画次数自动补充反方向动画alternate 是否保存最后一帧状态forwards

变形

平移

transform：translate（x , y）

transform：translateX（）translateY（）

旋转 transform：rotate（度数deg 正方向顺时针）

缩放 transform：scale（数字值0-1）

css 3D

2D与3D的区别就在于坐标系。

当我们给元素加translateZ的时候，浏览器显示不出效果，因为刘安琪不知道该如何渲染

于是有一个属性能够决定屏幕与页面的距离 perspective

perspective

该属性用于开启3D坐标系效果。决定舞台距离屏幕的距离。

当一个元素拥有该属性时，表示该元素距离屏幕有一定的距离。

加了perspective属性，使该元素有了3D的效果

如以下例子：

没加perspective属性，box沿x轴旋转，只会产生box1高度减小的效果，并没有3D的x轴旋转效果

加了perspective属性后，box沿x轴旋转，会产生3D效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.box {
			perspective: 3000px;
			width: 600px;
			text-align: center;
			margin: 0 auto;
			padding-top: 100px;
		}
		img {
			border: 1px solid blue;
			transition: all 1s ease 0s;
		}
		img:hover {
			/*悬浮时*/
			transform: rotateX(45deg);
		}
		.box1 {
			width: 600px;
			text-align: center;
			margin: 0 auto;
			padding-top: 100px;
		}
		.box1 img:hover {
			/*悬浮时*/
			transform: rotateX(-45deg);
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="imgs/logo.png" alt="">
	</div>

	<div class="box1">
		<img src="imgs/logo.png" alt="">
	</div>
</body>
</html>

transform-style 子元素保留3D效果

transform-style: preserve-3d;

该属性用于让子元素的3d效果保留

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#box {
			/*perspective: 3000px;*/
			transform-style: preserve-3d;
			width: 300px;
			height: 300px;
			margin: 100px auto;
			border: 1px solid blue;
			transform: rotateY(30deg);
		}
		#child {
			width: 300px;
			height: 300px;
			background-color: red;
			transform: rotateX(30deg);
		}
	</style>
</head>
<body>
		<div id="box">
			<div id="child"></div>
		</div>
</body>
</html>

立方体

用以上属性可以做一个3D立方体

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#unit {
			transform-style: preserve-3d;
			width: 300px;
			height: 300px;
			border: 1px solid blue;
			position: relative;
			margin: 100px auto;
			transform: rotateX(30deg) rotateY(45deg);
			/*animation: zhuan 3s ease 0s infinite;*/
			/* transform: rotateY(23deg) rotateX(40deg); */
		}
		/* 定义动画 */
		@keyframes zhuan {
			from {
				transform: rotateX(0deg) rotateY(35deg);
			}

			to {
				transform: rotateX(359deg) rotateY(35deg);
			}
		}
		#unit div {
			opacity: .5;
			/*为了让6个面叠在一起 所以添加定位值*/
			position: absolute;
			top: 0;
			left: 0;
			width: 300px;
			height: 300px;
		}
		.front {
			background-color: red;
			/*第一个元素是正面 朝上 向上抬起300px*/
			transform: translateZ(150px);
		}
		.back {
			background-color: blue;
			/*因为第一个front向上走了300 而整体的立方体宽高厚都是300 所以本元素不动*/
			transform: translateZ(-150px);
		}
		.left {
			background-color: orange;
			/*如果直接旋转90deg 那么会只有一半*/
			/*所以 要先往上平移150 就是沿着它的z轴 再旋转*/
			/*transform: rotateX(90deg);*/
			/*transform: translateZ(150px) rotateX(90deg) ;*/
			/*此时它 不再边上而是在正中心 所以又要平移到边上 沿着自身的z轴 往前或者往后走150px*/
			transform: rotateX(90deg) translateZ(150px);
		}
		.right {
			background-color: pink;
			/*先往上走150px 再旋转 再往后走150px*/
			transform:  rotateX(90deg) translateZ(-150px);
		}
		.bottom {
			background-color: skyblue;
			/*先往上走150px 到达中心 再沿着y轴旋转90deg 在往前走150px*/
			transform:  rotateY(90deg) translateZ(150px);
		}
		.top {
			background-color: tan;
			transform:  rotateY(90deg) translateZ(-150px);
		}
	</style>
</head>
<body>
	<!-- 分析： 立方体 6个面 每一个面用一个元素来表示 为了方便添加动画 所以在这6个元素外添加一个盒子-->
	<div id="unit">
		<div class="front"></div>
		<div class="back"></div>
		<div class="left"></div>
		<div class="right"></div>
		<div class="bottom"></div>
		<div class="top"></div>
	</div>
</body>
</html>

transform：scaleZ（）

scaleZ属于z轴方向的缩放但是对于一个元素自身来说没有任何意义因为元素没有“厚度”

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#box {
			width: 300px;
			height: 300px;
			background-color: red;
			margin: 200px auto;
			/*添加scaleX Y Z*/
			transform: scaleX(2) scaleY(.1);
			/*如果设置scaleZ 没有任何意义*/
		}
	</style>
</head>
<body>
	<!-- scaleZ属于z轴方向的缩放 但是对于一个元素自身来说 没有任何意义 因为元素没有“厚度” -->
	<!-- 但是scaleZ对元素内部的子元素是有用的 -->
	<!-- 针对元素自身 -->
	<div id="box"></div>

</body>
</html>

但是scaleZ对元素内部的子元素是有用的

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#unit {
			transform-style: preserve-3d;
			width: 300px;
			height: 300px;
			border: 1px solid blue;
			position: relative;
			margin: 200px auto;
			/*transform: rotateX(30deg) rotateY(45deg);*/
			/*animation: zhuan 3s ease 0s infinite;*/
			/*transform: rotateY(23deg) rotateX(40deg);*/
			/*给父元素添加scaleZ*/
			transform: rotateY(23deg) rotateX(40deg) scaleZ(2);
		}
		/* 定义动画 */
		@keyframes zhuan {
			from {
				transform: rotateX(0deg) rotateY(35deg);
			}

			to {
				transform: rotateX(359deg) rotateY(35deg);
			}
		}
		#unit div {
			opacity: .5;
			/*为了让6个面叠在一起 所以添加定位值*/
			position: absolute;
			top: 0;
			left: 0;
			width: 300px;
			height: 300px;
		}
		.front {
			background-color: red;
			/*第一个元素是正面 朝上 向上抬起300px*/
			transform: translateZ(150px);
		}
		.back {
			background-color: blue;
			/*因为第一个front向上走了300 而整体的立方体宽高厚都是300 所以本元素不动*/
			transform: translateZ(-150px);
		}
		.left {
			background-color: orange;
			/*如果直接旋转90deg 那么会只有一半*/
			/*所以 要先往上平移150 就是沿着它的z轴 再旋转*/
			/*transform: rotateX(90deg);*/
			/*transform: translateZ(150px) rotateX(90deg) ;*/
			/*此时它 不再边上而是在正中心 所以又要平移到边上 沿着自身的z轴 往前或者往后走150px*/
			transform: rotateX(90deg) translateZ(150px);
		}
		.right {
			background-color: pink;
			/*先往上走150px 再旋转 再往后走150px*/
			transform:  rotateX(90deg) translateZ(-150px);
		}
		.bottom {
			background-color: skyblue;
			/*先往上走150px 到达中心 再沿着y轴旋转90deg 在往前走150px*/
			transform:  rotateY(90deg) translateZ(150px);
		}
		.top {
			background-color: tan;
			transform:  rotateY(90deg) translateZ(-150px);
		}
	</style>
</head>
<body>
	<!-- 分析： 立方体 6个面 每一个面用一个元素来表示 为了方便添加动画 所以在这6个元素外添加一个盒子-->
	<div id="unit">
		<div class="front"></div>
		<div class="back"></div>
		<div class="left"></div>
		<div class="right"></div>
		<div class="bottom"></div>
		<div class="top"></div>
	</div>
</body>
</html>

使用scaleZ( )后，

backface-visibility属性

backface-visibility: hidden; 背面隐藏 (虽然隐藏，但依旧占据标准流中的位置)

一个图片添加翻转属性让它沿着x轴旋转180deg，那样就是图片的反面面对我们，正常也是可以见到图片的反面，添加backface-visibility：hidden；图片的反面不可见

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#box {
			text-align: center;
		}
		img {
			/*添加背面不可见属性*/
			backface-visibility: hidden;
		  	transform: rotateX(180deg);
		}
	</style>
</head>
<body>
	<div id="box">
		<img src="imgs/logo.png" alt="">
	</div>
</body>
</html>

改变旋转中心

改变旋转中心，使用css3的属性transform-origin 来设置

有三个值: transform-origin: x y z;

写法有3种: 单词、像素值、百分比

单词写法：

x轴 => left、 center、 right

y轴 => top、 middle、 bottom

百分比：这个属性有一个默认值: 50% 50% 0

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		h2 {
			text-align: center;
		}
		div[id^=box] {
			width: 560px;
			height: 300px;
			margin: 200px auto;
			border: 1px solid blue;
		}
		/*让图片旋转*/
		#box1 img {
			transform: rotate(45deg);
		}
		/*改变图片的旋转中心 再次旋转*/
		#box2 img {
			/*值有3个分别代表x轴 y轴 z轴 但是一般使用前两个*/
			/*写法有3种 第一种使用英文单词*/
			/*transform-origin: center top;*/
			/*transform-origin: 0 0;*/
			/*transform-origin: 0% 0%;*/
			transform: rotate(45deg);
		}
	</style>
</head>
<body>
	<h2>图片</h2>
	<div id="box">
		<img src="imgs/0.jpg" alt="">
	</div>
	<h2>图片沿着Z轴旋转45角度</h2>
	<div id="box1">
		<img src="imgs/0.jpg" alt="">
	</div>
	<h2>改变旋转轴 再旋转45角度</h2>
	<div id="box2">
		<img src="imgs/0.jpg" alt="">
	</div>
</body>
</html>

猜你喜欢