CSS3中的3D旋转特效

最新推荐文章于 2024-05-06 13:10:01 发布

weixin_44592738

最新推荐文章于 2024-05-06 13:10:01 发布

阅读量1.3k

点赞数 8

分类专栏： css3高级开发文章标签： css3 3D旋转 @keyframes transform rotate

本文链接：https://blog.csdn.net/weixin_44592738/article/details/103222753

版权

css3高级开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS3中的3D旋转特效

前期准备

三维空间：
三维既是坐标轴的三个轴，即x轴、y轴、z轴，其中x表示左右空间，y表示上下空间，z表示前后空间。但在实际应用方面，一般把用X轴形容左右运动，而Z轴用来形容上下运动，Y轴用来形容前后运动，这样就形成了人的视觉立体感。
三维是由一维和二维组成的，二维即只存在两个方向的交错，将一个二维和一个一维叠合在一起就得到了三维。
三维具有立体性，前后，左右，上下都只是相对于观察的视点来说。没有绝对的前后，左右，上下。
在这里插入图片描述

Css属性：
transform
translateX(x) 进行3D转换，以x轴为中心进行旋转，括号里写具体旋转的度数
translateY(y) 进行3D转换，以y轴为中心进行旋转，括号里写具体旋转的度数
translateZ(z) 进行3D转换，以z轴为中心进行旋转，括号里写具体旋转的度数

transform-style
preserve-3d 让子元素以3D的方式显示，若没有此值子元素默认以2D的方式显示
transition 对动画效果进行过渡显示，若没有此属性，其动画效果将会是瞬间完成

@keyframes
@keyframes 动画名（持续时间百分比{css样式属性}）
动画名：必须要有
百分比合法值（必须要有）：
0-100%
from (和0%相同)
to (和100%相同)

animation
将动画属性绑定到相应的html元素上

animation-timing-function
指定动画将如何完成一个周期。
速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
速度曲线用于使变化更为平滑。

源码展示

HTML源码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>制作3D立方体旋转特效</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<div class="warp">
		<div class="cube">
			<div class="out_front"><img src="images/1.jpg" alt="" class="pic"></div>
			<div class="out_back"><img src="images/2.jpg" alt="" class="pic"></div>
			<div class="out_left"><img src="images/3.jpg" alt="" class="pic"></div>
			<div class="out_right"><img src="images/4.jpg" alt="" class="pic"></div>
			<div class="out_top"><img src="images/5.jpg" alt="" class="pic"></div>
			<div class="out_bottom"><img src="images/6.jpg" alt="" class="pic"></div>
			<span class="in_front"><img src="images/7.jpg" alt="" class="in_pic"></span>
			<span class="in_back"><img src="images/8.jpg" alt="" class="in_pic"></span>
			<span class="in_left"><img src="images/9.jpg" alt="" class="in_pic"></span>
			<span class="in_right"><img src="images/10.jpg" alt="" class="in_pic"></span>
			<span class="in_top"><img src="images/11.jpg" alt="" class="in_pic"></span>
			<span class="in_bottom"><img src="images/12.jpg" alt="" class="in_pic"></span>
		</div>
	</div>
</body>
</html>

CSS源码:

html{
	height: 100%;
	background: linear-gradient(#ffd17c 0%,#000 80%);
}
.warp{
	width: 650px;
	height: 200px;
	margin: 150px 360px;
	position: relative;
}
@-webkit-keyframes mymove{
	from {transform:rotateX(0deg) rotateY(0deg);}
	to {transform:rotateX(360deg) rotateY(360deg);}
}
.cube{
	width: 200px;
	height: 200px;
	margin:0 auto ;
	transform-style:preserve-3d;
	transform:rotateX(-30deg) rotateY(-80deg);
	-webkit-animation:mymove 20s infinite; 
	animation-timing-function:linear;
}
.cube div{
	position: absolute;
	width: 200px;
	height: 200px;
	opacity: 0.8;
	transition:all .4s;
}
.pic{
	width: 200px;
	height: 200px;
}
.cube .out_front{
	transform:rotateY(0deg) translateZ(-100px);
}
.cube .out_back{
	transform:rotateY(180deg) translateZ(-100px);
}
.cube .out_left{
	transform:rotateY(90deg) translateZ(100px);
}
.cube .out_right{
	transform:rotateY(-90deg) translateZ(100px);
}
.cube .out_top{
	transform:rotateX(90deg) translateZ(100px);
}
.cube .out_bottom{
	transform:rotateX(-90deg) translateZ(100px);
}

.cube span{
	display: block;
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50px;
	left: 50px;
}
.cube .in_pic{
	width: 100px;
	height: 100px;
}
.cube .in_front{
	transform:rotateY(0deg) translateZ(-50px);
}
.cube .in_back{
	transform:rotateY(180deg) translateZ(-50px);
}
.cube .in_left{
	transform:rotateY(90deg) translateZ(50px);
}
.cube .in_right{
	transform:rotateY(-90deg) translateZ(50px);
}
.cube .in_top{
	transform:rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{
	transform:rotateX(-90deg) translateZ(50px);
}

.cube:hover .out_front{
	transform:rotateY(0deg) translateZ(-200px);
}
.cube:hover .out_back{
	transform:rotateY(180deg) translateZ(-200px);
}
.cube:hover .out_left{
	transform:rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{
	transform:rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top{
	transform:rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom{
	transform:rotateX(-90deg) translateZ(200px);
}