<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.box {
width:200px;
height:200px;
background: #CCC;
border:1px solid black;
margin:100px auto 0;
transform:perspective(700px) rotateX(60deg) rotateZ(40deg);
/*给父级去掉限制*/
transform-style: preserve-3d;
}
.child {
width:100%; height:100%; background:yellow; transition:1s all ease;
transform: translateZ(0px);
transform-style: preserve-3d;
}
.child:active {transform: translateZ(100px)}
.child2 {
width:100%; height:50%; background:green; transition:1s all ease;
transform: translateZ(0);
}
.child2:active {transform: translateZ(50px);}
</style>
</head>
<body>
<div class="box">
<div class="child">
<div class="child2">
文字
</div>
</div>
</div>
</body>
</html>
CSS3
transform 3D：
1.X/Y/Z坐标轴
2.透视
--------------------------------------------------------------------------------
3d transform——perspective、preserve-3d
1.perspective——自己 视觉效果
*只给最外层加一次
2.preserve-3d——子元素 子元素可以脱离父级
*每个需要子级出来的地方都得加
--------------------------------------------------------------------------------
transform-3D
WebGL
--------------------------------------------------------------------------------
移动端开发？
真正的柔软——CSS4
--------------------------------------------------------------------------------
移动端开发
1.移动端布局——适配
2.touch
3.库
4.响应式
--------------------------------------------------------------------------------
移动端适配：
1.viewport-可视区
最早-手机要照顾PC端
2.盒模型
普通盒子.width=width + padding + border
3.flex-弹性盒模型
i.具备border-box的能力
ii.对border、padding和margin都好用
iii.跟max-width、min-width配合
4.rem
单位：px、%、em、...
px: 绝对
em: 相对，自身字体
rem:相对，root字体
rem——相对于html的font-size
总结：在不同的屏幕尺寸下，只需要调整HTML元素的font-size
方便、性能高
一切尺寸都用rem/%
--------------------------------------------------------------------------------
1.做一个移动端页面
2.响应式
3.touch
...
<div style="width:20rem;"></div>
