1.行内的盒子——考虑定位
2.3D旋转:
rotateX()
rotateY()
rotateZ()
设置旋转中心点:transform-origin
skew(x,y) 倾斜
示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素练习</title> <style type="text/css"> *{margin: 0;padding: 0;} body{ font:8em 微软雅黑; padding:200px; } .music{ margin: .2em; color: #323FFF; position: relative; /*子绝父相*/ } .music:before,.music:after{ content: attr(music_data); /*获取属性的字符串*/ position: absolute; top:0; left: 0; transform-origin: left top; /*设置旋转中心点为左上角*/ transition:transform 0.5s ease-in 0s; } .music:before{ color: #fff; z-index: 3; /*提高权重*/ transform: rotateX(0deg) rotateY(-15deg) rotateZ(0deg); /*绕着Y轴旋转*/ } /*该部分当做阴影部分*/ .music:after{ color: rgba(0,0,0,0.2); /*字体颜色:透明度为2的黑色*/ transform: scale(1.1,1) ; /*X轴方向缩放1.1倍,Y轴不变*/ z-index: 2; } .music:hover:before{ color: #fafafa; /*修改最上面白色字体的颜色*/ /*skew(x,y)表示倾斜*/ transform: rotateX(0deg) rotateY(-40deg) rotateZ(0deg) skew(0deg,1deg); } /*阴影的变化*/ .music:hover:after{ /*增大Y轴的倾斜度,继续按照之前的缩放*/ transform:scale(1.1,1) rotateX(0deg) rotateY(-40deg) rotateZ(0deg) skew(0deg,10deg); } </style> </head> <body> <span class="music" music_data="古">古</span> <!--music_data为自定义属性--> <span class="music" music_data="典">典</span> <span class="music" music_data="音">音</span> <span class="music" music_data="乐">乐</span> </body> </html>运行效果:
鼠标移动上去之后:
(注:该案例学习视频来自传智)