CSS(五) -- 动效实现(立体盒子旋转-四方体+正六边)

一. 四面立体旋转

正方形旋转

小程序中

wxss中

javascript 复制代码
<!-- 背景 -->
 <view class="dragon">
 	<!--旋转物体位置-->
    <view class="dragon-position">
    	<!--旋转 加透视 有立体的感觉-->
        <view class="d-parent">
            <view class="d-box d-box1">1</view>
            <view class="d-box d-box2">2</view>
            <view class="d-box d-box3">3</view>
            <view class="d-box d-box4">4</view>
        </view>
    </view>
</view>
css 复制代码
 /* 设置动画 */
 @keyframes word {
    0% {
        transform: rotateY(0);
    }
    100% {
        transform: rotateY(360deg);
    }
}



/*
设置每个面的盒子宽度 W = 72  

translate3d(X,Y,Z)

*/
 .d-parent  {
 
    transform-style: preserve-3d;  /* 3D呈现 */
    transform-origin: 36rpx 0 -36rpx;   /* 3d立体旋转轴 如(图二)所示  x=W/2(方向像右为正方向)  z=W/2 (方向往内为反方向)   */
    transition: all 5s;
    animation: word 5s infinite linear;  /* 动画效果 */
}
/* 每个盒子的大小 以及旋转轴 */
.d-parent .d-box {
    width: 72rpx;
    height: 72rpx;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 36rpx 0 0;   /* 这里的旋转轴统一为整个面的中心线(图一) */
    
}
.d-box1 {
/*第一个盒子为正面 不需要变化*/
background-color: rgba(12, 111, 11, 1);
} 
.d-box2 {
    background-color: rgba(222, 0, 0, 1);
    /* 盒子为立体右边方向  先旋转90度  x方向-> x=W/2 z=W/2(往内部走 方向为负)  旋转180度是整个立体旋转的时候 让这个盒子正向  */
    transform:   rotateY(90deg) translate3d(36rpx,0,-36rpx) rotateY(180deg);
}
.d-box3 {
    background-color: rgba(10, 40, 200, 1);
    /* 盒子为最后面方向  直接往后移动 Z=W 旋转180度同理  */
    transform: translate3d(0,0,-72rpx) rotateY(180deg);
}
.d-box4 {
    background-color: rgba(101, 140, 200, 1);
    /* 盒子为立体左边方向 反方向旋转90度 往反方向移动 X=W/2 往后移动 Z=W/2 旋转180度同理   */
    transform:  rotateY(-90deg) translate3d(-36rpx,0,-36rpx) rotateY(180deg);
} 

/* 可以设置图片旋转 盒子中间内容自定义 */
.d-parent .d-box image {
    width: 72rpx;
    display: block;
}

(图一)
其余三个盒子旋转 平移 拼成个立体图形 旋转统一设置成图中所示

(图二)

·旋转中心轴

二、正六边形立体旋转

① wxss中
javascript 复制代码
<!-- 背景 -->
 <view class="dragon">
 	<!--旋转物体位置-->
    <view class="dragon-position">
    	<!--旋转 加透视 有立体的感觉-->
         <view class="d-parent">
            <view class="d-box d-box11">1</view>
            <view class="d-box d-box22">2</view>
            <view class="d-box d-box33">3</view>
            <view class="d-box d-box44">4</view>
            <view class="d-box d-box55">5</view>
            <view class="d-box d-box66">6</view>
        </view>
    </view>
</view>
② css中
css 复制代码
 /* 设置动画 */
 @keyframes word {
    0% {
        transform: rotateY(0);
    }
    100% {
        transform: rotateY(360deg);
    }
}



/*
设置每个面的盒子宽度 W = 72  

translate3d(X,Y,Z)

*/

.d-parent  {
    transform-style: preserve-3d;
    transform-origin: 36rpx 0 -64rpx; /* 3d立体旋转轴  x=W/2(方向像右为正方向)  z= ( W² - (W/2)² 开根号 (方向往内为反方向) 见图三   */
    transition: all 5s;
    animation: word 5s infinite linear;
}
.d-parent .d-box {
    width: 72rpx;
    height: 72rpx;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 36rpx 0 0;  /* 这里的旋转轴统一为整个面的中心线 */
    
}
.d-box11 {
    background-color: rgba(12, 111, 11, 1);
}
.d-box22 {
    background-color: rgba(222, 0, 0, 1);
    /* 右前1 x--> (w/4)*3   z--> ( w² - (w/2)² 开根号)/2  旋转180度同理与正四边形旋转同理*/
    transform: rotateY(120deg) translate3d(54rpx,0,-32rpx) rotateY(180deg);
}
.d-box33 {
    background-color: rgba(10, 40, 200, 1);
    /* 右后1 旋转 再右移 后移  x--> (w/4)*3   z-->  (( w² - (w/2)² 开根号)/2)*3  旋转180度同理 */
    transform: rotateY(60deg) translate3d(54rpx,0,-96rpx) rotateY(180deg);
}
.d-box44 {
    background-color: rgba(101, 140, 200, 1);
     /* 后面  后移  z-->  ( w² - (w/2)² 开根号)*2  旋转180度同理 */
    transform: translate3d(0,0,-120rpx) rotateY(180deg);
}
.d-box55 {
    background-color: rgb(100, 9, 255);
    /* 左后1 反方向旋转 再往左移动往后移动  x--> (w/4)*3   z-->(( w² - (w/2)² 开根号)/2)*3  旋转180度同理 */
    transform: rotateY(-60deg) translate3d(-54rpx,0,-96rpx) rotateY(180deg);
}
.d-box66 {
    background-color: rgb(255, 255, 81);
    /* 左前1 反方向旋转   x--> (w/4)*3   z-->  ( w² - (w/2)² 开根号)/2   旋转180度同理 */
    transform: rotateY(-120deg) translate3d(-54rpx,0,-32rpx) rotateY(180deg);
}

图三
为正六边形的上切图

相关推荐
我要洋人死10 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人21 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人22 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR27 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香29 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969332 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai37 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#