transform 3d学习&简单示例

  • 平移:transform: tranlateX(x) | tranlateY(y) | translateZ(z) | translate3d(x, y, z);
  • 比例:transform: scaleX(x) | scaleY(y) | scaleZ(z) | scale3d(x, y, z);
  • 旋转:transform: rotateX(1) | rotateY(1) | rotateZ(1) | rotate3d(1, 1, 1, 45deg);
  • 函数写法,以上都可以写成下面这种形式:transform: matrix3d(...);
  • transform-style: preserve-3d;
    父元素必须设置该属性才能开启3d空间
  • perspective: 1000px;
    透视距离。表示人眼到屏幕的距离,值越小,图越大

示例写3d旋转

css 复制代码
 <div className={styles.box}>
       <li className={styles.li}></li>
        <li className={styles.li}></li>
        <li className={styles.li}></li>
        <li className={styles.li}></li>
        <li className={styles.li}></li>
        <li className={styles.li}></li>
    </div>
css 复制代码
.box {
    position: relative;
    width: 500px;
    height: 300px;
    transform-style: preserve-3d;
    /* background: #eee; */
    /* perspective: 1000px; */ 
    animation: move 10s linear infinite;
    animation-play-state: paused;
    transform: rotateX(60deg);
}

.box:hover {
    animation-play-state: running;
}

.li {
    list-style: none;
    width: 100px;
    height: 200px;
    position: absolute;
    left: 200px;
    top: 50px;
    box-shadow: 0 0 10px 0 #fff;
}

.li:nth-child(1){
    background: red;
    transform: rotateY(0deg) translateZ(100px);
}
.li:nth-child(2){
    background: orange;
    transform: rotateY(60deg) translateZ(100px);
}
.li:nth-child(3){
    background: blue;
    transform: rotateY(120deg) translateZ(100px);
}
.li:nth-child(4){
    background: green;
    transform: rotateY(180deg) translateZ(100px);
}
.li:nth-child(5){
    background: yellow;
    transform: rotateY(240deg) translateZ(100px);
}
.li:nth-child(6){
    background: purple;
    transform: rotateY(300deg) translateZ(100px);
}

@keyframes move {
    0% { transform: rotateX(-20deg) rotateY(0deg); }
    100% { transform: rotateX(-20deg) rotateY(360deg); }
}

效果

相关推荐
码哥DFS10 小时前
Flex布局原理
前端·css·css3
长路 ㅤ   11 小时前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
Liudef061 天前
2048小游戏实现
javascript·css·css3
没有钱的钱仔2 天前
STM32低功耗模式全面指南
css·stm32·css3
涔溪3 天前
HTML5 实现的圣诞主题网站源码,使用了 HTML5 和 CSS3 技术,界面美观、节日氛围浓厚。
css3·html5·节日
失落的多巴胺4 天前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
哎呦你好4 天前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
路光.18 天前
加载动画
css·html·css3
年纪轻轻就扛不住18 天前
css3 文本效果(text-shadow、text-overflow、word-wrap、word-break)文本阴影、文本换行、文本溢出并隐藏显示省略号
前端·word·css3
陶甜也18 天前
threejs 实现720°全景图,;两种方式:环境贴图、CSS3DRenderer渲染
前端·vue.js·css3·threejs