3D立方体旋转、css3

水煮白菜王

已于 2024-06-17 17:10:09 修改

阅读量203

点赞数 1

分类专栏： HTML5 文章标签： html css3

于 2020-04-14 19:10:38 首次发布

本文链接：https://blog.csdn.net/weixin_45511682/article/details/105518659

版权

HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

3D转换transform

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
语法：transform: none|transform-functions;

值	解释
none	定义不进行转换
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵
translate(x,y)	定义 2D 转换
translate3d(x,y,z)	定义 3D 转换
------	---------
实例：实现3D立方体旋转，鼠标放在立方体上自动旋转。

HTML

<body>
 <div class="box">
  <div class="front">front</div>
  <div class="back">back</div>
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="top">top</div>
  <div class="bottom">bottom</div>
 </div>
</body>

2.css

<style>
body{
	margin:0;
	padding:0;
	background-color:#F7F7F7;}
.box{
	width:200px;
	height:200px;
	text-align:center;
	line-height:200px;
	font-size:24px;
	margin:100px auto;
	position:relative;
	perspective:1000px;
	transform-style:preserve-3d;
	transform:rotateX(-30deg) rotateY(30deg);
	transition:5s;
	}
.front,.back,.left,.right,.top,.bottom{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	opacity:0.5;}
.front{
	background-color:pink;
	transform:translateZ(100px);
	}
.left{
	background-color:green;
	transform:rotateY(90deg) translateZ(-100px);}
.right{
	background-color:red;
	transform:rotateY(-90deg) translateZ(-100px);
	}
.top{
	background-color:blue;
	transform:rotateX(90deg) translateZ(100px);}
.bottom{
	background-color:yellow;
	transform:rotateX(-90deg) translateZ(100px);}
.back{
	background-color:purple;
	transform: translateZ(-100px);}
.box:hover{
	transform:rotateZ(90deg);}
</style>

水煮白菜王

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
3D立方体旋转、css3

3D转换transformTransform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。语法：transform: none|transform-functions;值解释none定义不进行转换matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵translate(x,y)定义 2D 转换t...
复制链接

扫一扫