CSS3-数据可视化_代码007(未授权)

CSS3 transform 属性允许你旋转，缩放，倾斜或平移给定元素。
Tr ans form是形变的意思（通常也叫变换），transformer 就是变形金刚
常见的函数 transform function有：

CSS3 transform 属性允许你在二维或三维空间中直观地变换元素。

tr a n sf o rm–origin：变形的原点（即坐标系0 , 0点）
一个值：

CSS3 tr a n sf o rm属性不但允许你进行2D的旋转，缩放或平移指定的元素，还支持3D变换元素。
常见的函数tr a n sf o rm function有：

旋转：rotateX(de g)、rotateY(deg)、rotateZ(deg)

rotateX(50deg) 相当于 rotate3d(1, 0, 0, 50deg)
rotateY(20deg) 相当于 rotate3d(0, 1, 0, 20deg)
rotateZ(30deg) 相当于 rotate3d(0, 0, 1, 30deg)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      margin: 0;
      padding: 0;
      background-image: url(../images/grid.png);
    }
    .box{
      position: relative;
      width: 200px;
      height: 100px;
      background-color: skyblue;
      
      /* 在父元素中添加 transform-style来启用3D空间 */
      transform-style: preserve-3d;
      /* 在父元素添加透视效果 */
      perspective: 300px;

    }

    .item{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: pink;

      /* 形变 */
       transform: rotateX(70deg) translateX(50px);
    }
  </style>
</head>
<body>
  
  <div class="box">div
    <div class="item">10</div>
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			body {
				margin: 0;
				padding: 100px;
				background-image: url(../images/grid.png);
			}
			.box {
				position: relative;
				width: 100px;
				height: 100px;
				background-color: red;

				/* 在父元素中添加 transform-style来启用3D空间 */
				transform-style: preserve-3d;
				transform: rotateX(-33.5deg) rotateY(45deg) scaleZ(2);
			}

			.item {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			.top {
				background-color: rgba(255, 0, 0, 0.4);
				transform: rotateX(90deg) translateZ(50px);
			}
			.bottom {
				background-color: rgba(0, 255, 0, 0.4);
				transform: rotateX(-90deg) translateZ(50px);
			}

			.front {
				background-color: rgba(100, 100, 100, 0.4);
				transform: rotateY(0deg) translateZ(50px);
			}

			.back {
				background-color: rgba(0, 255, 255, 0.4);
				transform: rotateY(-180deg) translateZ(50px);
			}

			.left {
				background-color: rgba(255, 255, 0, 0.4);
				transform: rotateY(-90deg) translateZ(50px);
			}
			.right {
				background-color: rgba(0, 0, 255, 0.4);
				transform: rotateY(90deg) translateZ(50px);
			}
		</style>
	</head>
	<body>
		<!-- 父元素(舞台) -->
		<div class="box">
			div
			<!-- 子元素 -->
			<div class="item top">1</div>
			<div class="item bottom">2</div>
			<div class="item front">3</div>
			<div class="item back">4</div>
			<div class="item left">5</div>
			<div class="item right">6</div>
		</div>
	</body>
</html>