css3----立方体的旋转

最新推荐文章于 2021-01-26 17:05:25 发布

拳是套路

最新推荐文章于 2021-01-26 17:05:25 发布

阅读量186

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/weixin_43750811/article/details/105767236

版权

css3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

核心点

页面 x,y,z 坐标系的构建（以正对屏幕方向参考方向，向左为 + x, 向下为+y, 向外为 +z）
rotateX,rotateY,rotateZ角度方向判断，以对应轴正方向为参考，逆时针旋转为正角度顺时针为负角度。注意，旋转时，坐标轴是跟着一起做旋转的。
旋转中心默认为元素的中心点，可以通过transform-origin进行设置

代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		html{
			/* 3d元素距视图的距离 (子元素会获得透视效果) */ 
			perspective: 800px;
		}
		.box{
			width: 200px;
			height: 200px;
			margin: 200px auto;
			/* transform-style: flat | preserve-3d */
			/*                  2d   | 3d 平面呈现  */
			transform-style: preserve-3d;
			/* 立方体旋转动画 */
			animation: rotate 20s infinite linear;
		}
		/* 立方体六面样式 */
		.box>div{
			width: 200px;
			height: 200px;
			border: 1px solid black;
			box-sizing: border-box;
			/* 绝对定位使所以面重叠在一起 之后通过旋转调节各个面的位置 */
			position: absolute;
			background-color: blue;
			opacity: 0.7;
			color: white;
		}
		/* 立方体上面位置和展开动画 */
		.top{
			transform: rotateX(-270deg) translateY(-100px);
			transform-origin: top center;
			animation: topOpen 5s infinite linear;
		}
		/* 立方体下面位置和展开动画 */
		.bottom{
			transform: rotateX(270deg) translateY(100px);
			transform-origin: bottom center;
			animation: bottomOpen 5s infinite linear;
		}
		/* 立方体左侧位置和展开动画 */
		.left{
			transform: rotateY(270deg) translateX(-100px);
  			transform-origin: center left;
  			animation: leftOpen 5s infinite linear;
		}
		/* 立方体右侧位置和展开动画 */
		.right{
			transform: rotateY(-270deg) translateX(100px);
  			transform-origin: top right;
  			animation: rightOpen 5s infinite linear;
		}
		/* 立方体前面位置和展开动画 */
		.front{
  			transform: translateZ(100px);
  			animation: 5s infinite linear;
		}
		/* 立方体后面位置和展开动画 */
		.behind {
		  	transform: translateZ(-100px) rotateY(180deg);
		  	animation:  5s infinite linear;
		}
		
		@keyframes rotate{
			from {
    			transform: rotateX(0deg) rotateY(0deg);
  			}
			to {
				transform: rotateX(360deg) rotateY(360deg);
			}
		}
		@keyframes topOpen{
			50%{
				transform: rotateX(-270deg) translateY(-100px);
			}	
		}
		@keyframes bottomOpen{
			50%{
				transform: rotateX(270deg) translateY(100px);
			}
		}
		@keyframes leftOpen{
			50%{
				transform: rotateY(270deg) translateX(-100px);
			}
		}
		@keyframes rightOpen{
			50%{
				transform: rotateY(-270deg) translateX(100px);
			}
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="top">top</div>
		<div class="bottom">bottom</div>
		<div class="left">left</div>
		<div class="right">right</div>
		<div class="front">front</div>
		<div class="behind">behind</div>
	</div>
</body>
</html>

效果展示: 在这里插入图片描述

拳是套路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3----立方体的旋转

核心点页面 x,y,z 坐标系的构建（以正对屏幕方向参考方向，向左为 + x, 向下为+y, 向外为 +z）rotateX,rotateY,rotateZ角度方向判断，以对应轴正方向为参考，逆时针旋转为正角度顺时针为负角度。注意，旋转时，坐标轴是跟着一起做旋转的。旋转中心默认为元素的中心点，可以通过transform-origin进行设置代码展示:<!DOCTYPE html&...
复制链接

扫一扫

专栏目录