<!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>
</head>
<body>
<!-- 3D 转换 -->
<!-- 3D偏移 translate3d -->
<!-- transform: translateX(50%); -->
<!-- transform: translateY(50%);会将x层叠掉 -->
<!-- transform: translate(50%, 50%); -->
<!-- transform: translateX(50px) translateY(50px); -->
<!-- transform: translateZ(50px); z轴一般跟px单位 +向外 -向外 -->
<!-- transform: translate3d(20px, 50px, 60px); x, y, z, -->
<!-- transform: translate3d(x, y, 0); 不需都要写,无则写0 -->
<!-- 3D 透视 perspective -->
<!-- perspective: 500px; 一般设置给父元素,或者body -->
<!-- perspective-origin: center center; 透视焦点位置,默认是父盒子居中位置 -->
<!-- perspective-origin: 50% 50%; -->
<!-- 3D 旋转 rotate3d -->
<!-- transform: rotateX(0); 左手法则 -->
<!-- transform: rotateY(45deg); -->
<!-- transform: rotateZ(-.5turn); -->
<!-- transform: rotate3d(1, 1, 1, 45deg); x, y, z轴同时旋转45deg -->
<!-- transform: rotate3d(1, 1, 0, 90deg); 沿着x,y轴的45度矢量旋转 -->
<!-- transform: rotate3d(40, 50, 60, 1turn) x,y,z可以写具体数值-->
<!-- transform: rotate3d(-1, -1, 0, 1turn) -->
<!-- 私有前缀 -->
<!-- 先写前缀 -->
<!-- -moz-border-radius: 5px; -->
<!-- -webkit-border-radius: 5px; -->
<!-- -ms-border-radius: 5px; -->
<!-- -o-border-radius: 5px; -->
<!-- border-radius: 5px; -->
<!-- body标签默认高度是0 -->
<!-- html高度是8px,因为body有8px的外边距 -->
<!-- 可以将html设置高度100%,然后将body设置为100%,这样body就会高度全屏 -->
<!-- matrix矩阵 -->
<!-- transform: matrix(a, b, c, d, e, f); -->
<!-- a-f 任意取值 -->
<!-- 位移, 旋转, 缩放 有特定的形式 -->
</body>
</html>
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
