<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D转换模块-形变中心点</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;
/*
第一个参数:水平方向
第二个参数:垂直方向
注意点
取值有三种形式
具体像素
百分比
特殊关键字
*/
/*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){
/*
默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点
*/
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转换模块-旋转轴向</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.什么是透视
近大远小
2.注意点
一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
*/
perspective: 500px;
}
ul li img{
width: 200px;
height: 200px;
/*perspective: 500px;*/
}
ul li:nth-child(1){
/*默认情况下所有元素都是围绕Z轴进行旋转*/
transform: rotateZ(45deg);
}
ul li:nth-child(2) img{
transform: rotateX(45deg);
}
ul li:nth-child(3) img{
/*
总结:
想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可
*/
transform: rotateY(45deg);
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
盒子阴影和文字阴影
-
1.如何给盒子添加阴影
-
1box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;
-
.2.注意点
-
2.1盒子的阴影分为内外阴影, 默认情况下就是外阴影
-
2.2快速添加阴影只需要编写三个参数即可
- box-shadow: 水平偏移 垂直偏移 模糊度;
-
默认情况下阴影的颜色和盒子内容的颜色一致
-
.3.如何给文字添加阴影
-
text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色 ;
image.png
网友评论