CSS3制作正方体案例transform练习

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

VIP文章 Ron韦斯莱

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

阅读量529

点赞数

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

版权

案例：制作正方体。
思路：通过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: pin

最低0.47元/天解锁文章

Ron韦斯莱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS3制作正方体案例transform练习

案例：制作正方体。思路：通过transform属性，使六个面通过平移旋转得到最终效果。效果展示：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>正方体</title> <style> .contai...
复制链接

扫一扫