css3d图形 |如何使用scss

css重叠描述，html css js教学，css实现点击图片旋转，sketch导出动画+css，css3过渡讲解视频，用css给html添加边框，如何使用scss css3d图形 |如何使用scss

CSS3D图形主要包含以下几种应用：

一、3D透视

.container {
perspective: 1000px; /*透视距离*/
}
.box {
transform: rotateY(45deg);/*旋转Y轴*/
transform-style: preserve-3d; /*启用3D*/
}

二、3D转换

.box {
transform: translateX(100px); /*沿X轴平移*/
transform: translateY(100px); /*沿Y轴平移*/
transform: scale(1.5); /*缩放*/
}

三、3D动画

.box {
animation: move 2s ease-in-out infinite;/*动画*/
}
@keyframes move {
0% {
transform: translateY(0);
}
50% {
transform: translateY(100px);
}
100% {
transform: translateY(0);
}
}

四、3D变形

.box {
transform: skew(30deg); /*斜切*/
transform: perspective(500px) rotateX(45deg); /*透视拉近视角*/
}

总之，CSS3D图形可以带来更为立体化的视觉效果，给网页带来更多的生动、感性的体验。要掌握它需要花费一些时间，在实践中不断摸索，但结果一定是值得的。