CSS3制作正方体案例transform练习

最新推荐文章于 2023-05-06 12:39:16 发布

Ron韦斯莱

最新推荐文章于 2023-05-06 12:39:16 发布

阅读量554

点赞数

本文链接：https://blog.csdn.net/qq_43537987/article/details/89402661

版权

该博客详细介绍了如何使用CSS3的transform属性来创建一个动态的正方体效果，通过平移和旋转六个面，达到立体变换的视觉体验。

摘要由CSDN通过智能技术生成

案例：制作正方体。
思路：通过transform属性，使六个面通过平移旋转得到最终效果。
效果展示：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>正方体</title>
	<style>
		.container {
			width: 200px;
			height: 200px;
			margin: 100px auto;
			position: relative;
			transform:rotate3d(1,1,1,30deg);
			transform-style:preserve-3d;

		}
		.container div {
			width: 200px;
			height: 200px;
			position: absolute;
			opacity: 0.5;

		}
		.container .first {
			background: blue;
			transform:translateZ(100px);
		}
		.container .two {
			background: green;
			transform:translateZ(-100px);
		}
		.container .three {
			background: pink;
			transform:translateX(-100px) rotateY(90deg);
		}
		.container .four {
			background: orange;
			transform:transla