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); }
}

效果

相关推荐
萱萱的七彩鱼9 小时前
css3之三维变换详说
前端·javascript·css3
代码的余温3 天前
CSS3文本阴影特效全攻略
前端·css·css3
伍哥的传说4 天前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
smile boy5 天前
个人财务记录应用
前端·javascript·css·css3·html5
Java&Develop6 天前
学生信息管理系统 - HTML实现增删改查
css·html·css3
说学逗唱攻城狮7 天前
css3地球转动模型(动态数据)
前端·css·css3
爱吃派大星的土拨鼠7 天前
HTML结构解析
前端·html·css3
凌辰揽月8 天前
贴吧项目总结二
java·前端·css·css3·web
顾辰呀9 天前
css flex 一行2个元素 不能挤压空间
前端·css·css3
Robbie丨Yang9 天前
近期工作感想:职业规划篇
html·css3·前端开发·工作·职业规划