<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 100px;
background-color: #ff0789;
transform: translateY(100px);
}
</style>
</head>
<body>
<div class="box"></div>
<!--
transform 设置元素的变换形式
平移变换
transform:translate(x,y); 像素值 百分比(相对于自身)
transform: translateX(100px);
transform: translateY(100px);
transform: translateX(100px) translateY(100px);
x 表示水平轴的位移量
y 表示竖直轴的位移量
旋转变换
旋转中心点是对角线的交点
transform: rotate(0deg);
单位
deg 度数 一个圆有360deg
rad 弧度 一个圆有2πrad
grad 梯度 一个圆有400grad
turn 圈数 一个圆有1turn
正值顺时针
负值逆时针
修改中心点
transform-origin: center center; 默认
方位值 百分比 像素值
和background-position的取值一样
缩放变换
transform: scale(2,3)
负值表示反转前边为水平反转 后边为竖直反转
前边表示水平放大倍数 后边表示竖直放大倍数
两个值一样可以合并
倾斜变换
transform: skew(0,0);
transform: skewX(0deg) 默认是center center这个点拉伸的
skewX的x轴和y轴是相反的 x轴和长方形的夹角度就是skewX的值
skewY是正常的 y轴和长方形的夹角度就是skewY的值
一个元素可以同时做多种变换
写复合元素的时候 注意先后顺序 旋转会改变x和y轴
3D网页的基本构成 = 舞台 + 在3D空间占据的位置 + 摄像头
-->
</body>
</html>
Python3Turtle