<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D轉(zhuǎn)換模塊-形變中心點(diǎn)</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
position: relative;
}
ul li{
list-style: none;
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
/*
第一個(gè)參數(shù):水平方向
第二個(gè)參數(shù):垂直方向
注意點(diǎn)
取值有三種形式
具體像素
百分比
特殊關(guān)鍵字
*/
/*transform-origin: 200px 0px;*/
/*transform-origin: 50% 50%;*/
/*transform-origin: 0% 0%;*/
/*transform-origin: center center;*/
transform-origin: left top;
}
ul li:nth-child(1){
/*
默認(rèn)情況下所有的元素都是以自己的中心點(diǎn)作為參考來(lái)旋轉(zhuǎn)的, 我們可以通過(guò)形變中心點(diǎn)屬性來(lái)修改它的參考點(diǎn)
*/
background-color: red;
transform: rotate(30deg);
}
ul li:nth-child(2){
background-color: green;
transform: rotate(50deg);
}
ul li:nth-child(3){
background-color: blue;
transform: rotate(70deg);
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>95-2D轉(zhuǎn)換模塊-旋轉(zhuǎn)軸向</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 800px;
height: 500px;
margin: 0 auto;
}
ul li{
list-style: none;
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 50px;
border: 1px solid #000;
/*
1.什么是透視
近大遠(yuǎn)小
2.注意點(diǎn)
一定要注意, 透視屬性必須添加到需要呈現(xiàn)近大遠(yuǎn)小效果的元素的父元素上面
*/
perspective: 500px;
}
ul li img{
width: 200px;
height: 200px;
/*perspective: 500px;*/
}
ul li:nth-child(1){
/*默認(rèn)情況下所有元素都是圍繞Z軸進(jìn)行旋轉(zhuǎn)*/
transform: rotateZ(45deg);
}
ul li:nth-child(2) img{
transform: rotateX(45deg);
}
ul li:nth-child(3) img{
/*
總結(jié):
想圍繞哪個(gè)軸旋轉(zhuǎn), 那么只需要在rotate后面加上哪個(gè)軸即可
*/
transform: rotateY(45deg);
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
盒子陰影和文字陰影
1.如何給盒子添加陰影
1box-shadow: 水平偏移 垂直偏移 模糊度 陰影擴(kuò)展 陰影顏色 內(nèi)外陰影;
.2.注意點(diǎn)
2.1盒子的陰影分為內(nèi)外陰影, 默認(rèn)情況下就是外陰影
-
2.2快速添加陰影只需要編寫(xiě)三個(gè)參數(shù)即可
- box-shadow: 水平偏移 垂直偏移 模糊度;
默認(rèn)情況下陰影的顏色和盒子內(nèi)容的顏色一致
.3.如何給文字添加陰影
text-shadow: 水平偏移 垂直偏移 模糊度 陰影顏色 ;
image.png
