CSS 3D transform画立方体

最新推荐文章于 2023-03-13 22:43:54 发布

小k铁柱

最新推荐文章于 2023-03-13 22:43:54 发布

阅读量170

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_40890601/article/details/106367896

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

用CSS画了个立方体。主要用的transform 属性。
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D transform</title>
		<style>
			.container {
				margin: 50px;
				padding:10px;
				border: 1px solid #f00;
				width:200px;
				height: 200px;
				position: relative;
				perspective: 500px;/*透视原理 透视属性 使z轴的位移有效*/
				/*选一个合适的长度刚好能观看到立体*/
			}
			#cube {
				width: 200px;
				height: 200px;
				transform-style: preserve-3d;/*透视*/
				transform: translateZ(-100px);
				transition: transform .8s ease-in-out .2s;
			}
			#cube:hover {
				transform: translateZ(-100px) rotateX(90deg) rotateY(90deg); 
			}
			#cube div {
				width: 200px;
				height: 200px;
				position:absolute;
				line-height: 200px;
				font-size: 50px;
				text-align:center;
			}
			.front {
				transform: translateZ(100px);
				/* transform:translateX(200px) translateX(25deg); */
				background: rgba(31, 186, 229, 0.2);
				opacity: .5;
			}
			.left {
				transform: translateX(-100px) rotateY(-90deg);
				background-color: rgba(142, 131, 225, 0.3);
			}
			.right {
				transform: translateX(100px) rotateY(90deg);
				background-color: rgba(154, 211, 231, 0.5);
			}
			.back {
				transform: translateZ(-100px) rotateY(180deg);
				background:rgba(188, 149, 232, 0.5);
			}
			.top {
				transform: translateY(-100px)  rotateX(90deg); /*左手手掌正对自己,往后是负 往前是正*/
				background:rgba(224, 226, 64, 0.6);
			}
			.bottom {
				transform: translateY(100px) rotateX(-90deg);
				background:rgba(244, 145, 146, 0.5);
			}
		</style>
	</head>
	<body>
<!-- 	translate 位移
		scale 缩放
		skew 斜切
		rotate 旋转
		transform 不一定有动画
-->
		<div class="container">
			<div id="cube">
				<div class="front">前</div>
				<div class="left">左</div>
				<div class="right">右</div>
				<div class="back">后</div>
				<div class="top">上</div>
				<div class="bottom">下</div>
			</div>
		</div>
	</body>
</html>

这里要注意两个属性，perspective: 500px;表示透视角度；transform-style: preserve-3d;表示保留3D效果。

小k铁柱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 3D transform画立方体

用CSS画了个立方体。主要用的transform 属性。Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>3D transform</title> <style> .container { margin: 50px; p
复制链接

扫一扫