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>