最后
喜欢的话别忘了关注、点赞哦~
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
height: 200px;
width: 200px;
margin: 200px auto;
transform-style: preserve-3d;
transform: rotateX(60deg);
}
.item {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
line-height: 200px;
opacity: 0.5;
text-align: center;
color: #fff;
font-size: 30px;
}
.item:nth-child(1) {
background: royalblue;
transform: rotateY(60deg);
}
.item:nth-child(2){
background: salmon;
transform: rotateY(120deg);
}
.item:nth-child(3) {
background: slateblue;
transform: rotateY(180deg);
}
.item:nth-child(4) {
background: springgreen;
transform: rotateY(240deg);
}
.item:nth-child(5) {
background: pink;
transform: rotateY(300deg);
}
.item:nth-child(6) {
background: purple;
transform: rotateY(360deg);
}
效果:
然后每个图片朝各自前面移动200px
即每个nth-child下的transform加一个translateZ(200px);
如:
.item:nth-child(1) {
background: royalblue;
transform: rotateY(60deg) translateZ(200px);
}
看效果:
最后设置旋转动画,并调整父容器的translateX(父容器抬头的角度)
父级容器wrapper修改translateX,并调用动画:
transform: rotateX(30deg);
animation: move 10s linear infinite;
动画帧:
@keyframes move {
0% {
css
1,盒模型
2,如何实现一个最大的正方形
3,一行水平居中,多行居左
4,水平垂直居中
5,两栏布局,左边固定,右边自适应,左右不重叠
6,如何实现左右等高布局
7,画三角形
8,link @import导入css
9,BFC理解
js
1,判断 js 类型的方式
2,ES5 和 ES6 分别几种方式声明变量
3,闭包的概念?优缺点?
4,浅拷贝和深拷贝
5,数组去重的方法
6,DOM 事件有哪些阶段?谈谈对事件代理的理解
7,js 执行机制、事件循环
8,介绍下 promise.all
9,async 和 await,
10,ES6 的 class 和构造函数的区别
11,transform、translate、transition 分别是什么属性?CSS 中常用的实现动画方式,
12,介绍一下rAF(requestAnimationFrame)
13,javascript 的垃圾回收机制讲一下,
14,对前端性能优化有什么了解?一般都通过那几个方面去优化的?
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
t 的垃圾回收机制讲一下,
14,对前端性能优化有什么了解?一般都通过那几个方面去优化的?
[外链图片转存中…(img-XDesiiLw-1715398034863)]