文本效果
文本阴影
text-shadow
适用于文本阴影
例题：
<Style>
.text-shadow{
font-size: 60px;
text-shadow: 10px 10px 5px blue;
}
</Style>
<body>
<div class="text-shadow">
hello,world!
</div>
</body>
盒子阴影
box-shadow
适用于盒子阴影
例题：
<Style>
.box-shadow{
font-size: 60px;
box-shadow: 10px 10px 5px blue;
}
</Style>
<body>
<div class="box-shadow">
hello,world!
</div>
</body>
卡片
card
文本溢出
文本溢出属性指定应向用户如何显示溢出内容
text-overflow：ellipsis；
文本溢出
例题：
<style>
.ellipsis{
width: 70px;
height: 70px;
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<body>
<div class="ellipsis">
文本溢出，溢出的内容都变成"..."
</div>
</body>
2D转换
css转换（transforms）允许你移动、旋转、缩放和倾斜元素。
translate（）方法
transforms：translate（x轴，y轴）
<style>
.translate{
transform: translate(100px,100px);
}
</style>
<body>
<div class="translate">
</div>
</body>
rotate（）方法
transforms：rotate（30deg）顺时针旋转元素
（想要逆时针旋转就写成负数（-30deg））
<style>
.rotate{
transform: rotate(45deg);
}
</style>
<body>
<div class="rotate"></div>
</body>
scale（）方法
transforms：scale（宽增长几倍，高增长几倍）
要和其他方法一起写的方式：transforms：（x轴，y轴） scale（宽增长几倍，高增长几倍）；
用空格隔开
<style>
.scale{
transform: scale(2,3);
}
</style>
<body>
<div class="scale">
</div>
</body>
scaleX（）方法
transforms：scaleX（）
<style>
.scaleX{
transform: scaleX(3);
}
</style>
<body>
<div class="scaleX">
</div>
</body>
宽度变化
scaleY（）方法
transforms：scaleY（）
高度变化
<style>
.scaleY{
transform: scaleY(4);
}
</style>
<body>
<div class="scaleY">
</div>
</body>
skewX（）方法
x轴方向倾斜
transforms：skewX（）
<style>
.skewX{
transform: skewX(45deg);
}
</style>
<body>
<div class="skewX">
</div>
</body>
skewY（）方法
Y轴方向倾斜
transforms：skewY（）
<style>
.skewY{
transform: skewY(45deg);
}
</style>
<body>
<div class="skewY">
</div>
</body>
skew（）方法
X,Y轴都倾斜
transforms：skew（x deg，y deg）
<style>
.skew{
transform: skew(20deg,20deg);
}
</style>
<body>
<div class="skew">
</div>
</body>
matrix（）方法
transforms：matrix（X倾斜度，高度，宽度，y轴倾斜度，平移宽，平移高）
transforms：matrix（skewX，scaleY，scaleX，skewY，translateX,translateY）
不加单位，如px或deg
<style>
.matrix{
transform: matrix(0.7,0.2,0.2,0.7,200,200);
}
</style>
<body>
<div class="matrix">
</div>
</body>
3D转换
立体空间感
x轴：水平向右，x右边是正值，右边是负值。
y轴：垂直向下，y下面是正值，上面是负值。
z轴：垂直屏幕，往外面是正值，往里面是负值。
转换方法：
transforms：rotateX（deg）
transforms：rotateY（deg）
transforms：rotateZ（deg）
retateX（）方法
transforms：rotateX（150deg）
使元素绕X轴旋转给定角度
<style>
.rotateX{
transform: rotateX(150deg);
}
</style>
<body>
<div class="rotateX">
world
</div>
</body>
retateY（）方法
transforms：rotateY（130deg）
使元素绕Y轴旋转给定角度
<style>
.rotateY{
transform: rotateY(130deg);
}
</style>
<body>
<div class="rotateY">
world
</div>
</body>
retateZ（）方法
transforms：rotateY（90deg）
使元素绕Z轴旋转给定角度
<style>
.rotateZ{
transform: rotateZ(90deg);
}
</style>
<body>
<div class="rotateZ">
world
</div>
</body>
透视
perspective 指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。
扫一扫
11万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
