transform 变形旋转

时间 2020-09-26

标签 transform 变形旋转繁體版

原文原文链接

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>html

html{
/*perspective 视距，设置人的眼睛和网页之间的距离*/
perspective: 800px;
}orm

.box1{
width: 200px;
height: 200px;
background-color: #bfa;
margin: 100px auto 0;htm

/*
transform
- 经过变形能够对元素进
平移、旋转，放大、缩小等操做it

translateX() 沿x轴方向平移
translateY() 沿y轴方向平移
- 可使用百分比的值，这个值是相对于本身的宽度和高度计算
translateZ() 沿z轴方向平移
*/io

transition: all 1s;
/*transform: rotateX(45deg) ;*/
}form

.box1:hover{
/*水平平移*/
/*transform: translateX(-100px);*/
/*transform: translateY(100px);*/
/*!*垂直平移*!*/
/*transform: translateY(50%);*/class

/*!*z轴的移动，元素距离用户的距离*!*/
/*transform: translateZ(300px);*/transform

/*!*沿x轴旋转*!*/
/*transform: rotateX(45deg) translateZ(100px);*/
/*transform: rotateX(360deg);*/meta

/*transform: rotateY(90deg);*/
/*transform: rotateZ(360deg);*/transition

transform: translateX(100px) rotateZ(45deg);
transform: rotateZ(45deg) translateX(100px) ;
}

/*.box2{*/
/* width: 100px;*/
/* height: 100px;*/
/* background-color: #ff0;*/
/* position: absolute;*/
/* top: 0;*/
/* left: 0;*/
/* bottom: 0;*/
/* right: 0;*/
/* margin: auto;*/
/*}*/

.box2{
position: absolute;
background-color: #ff0;
left: 50%;
top:50%;
transform: translateX(-50%) translateY(-50%);
transform: translate(-50%,-50%);
}

.box3{
height: 100px;
background-color: #ff0;
}

</style>
</head>
<body>

</body></html>

1. css变形--旋转
2. transform(变形)和transform-origin(变形原点)
3. css3 transform变形
4. transform 变形
5. CSS3--变形（transform）
6. css变形 transform
7. CSS变形transform(2d)
8. 3D变形(CSS3) transform
9. 2D变形(CSS3) transform
10. css之变形（transform）
更多相关文章...
• XSLT - 转换 - XSLT 教程
• R 绘图 - 条形图 - R 语言教程
• Java Agent入门实战（一）-Instrumentation介绍与使用
• ☆基于Java Instrument的Agent实现

transform 变形 旋转

transform 变形旋转