图像的立体旋转

最新推荐文章于 2024-07-13 11:50:40 发布

BinParker

最新推荐文章于 2024-07-13 11:50:40 发布

阅读量383

点赞数 1

文章标签： css html5 前端 chrome

本文链接：https://blog.csdn.net/BinParker/article/details/104372752

版权

旋转的魔方

首先要了解开启 3D 特效的语法：

transform-style: flat | preserve-3d；
flat 表示所有子元素在2D平面呈现。
preserve-3d 表示所有子元素在3D空间中呈现。

相关的页面布局如下：
HTML代码

<!DOCTYPE html><html>    
<head>       
 <meta charset="utf-8">       
 <title></title>       
   <link rel="stylesheet" type="text/css" href="css/demo.css"/>    
   </head>    
   <body>       
    <div class="box">           
    <div class="side before">前</div>            
    <div class="side after">后</div>            
    <div class="side left">左</div>            
    <div class="side right">右</div>            
    <div class="side top">上</div>            
    <div class="side bottom">下</div>        
    </div>    
    </body>
    </html>

CSSD代码：

* {    margin: 0;    padding: 0;}
.box {    position: relative;    width: 200px;    height: 200px;    margin: 200px auto;    /* 开启 3D 特效 */    transform-style: preserve-3d;    transition: all 2s ease;}
.side {    position: absolute;    top: 0;    left: 0;    width: 200px;    height: 200px;    text-align: center;    line-height: 200px;    font-size: 36px;    color: #FFFFFF;    background-color: rgba(66, 66, 66, 0.5);}
.left {    transform: translateX(-100px) rotateY(90deg);    background-color: rgba(57, 57, 107, 0.5);}
.right {    transform: translateX(100px) rotateY(90deg);    background-color: rgba(62, 238, 86, 0.5);}
.top {    transform: translateY(-100px) rotateX(90deg);    background-color: rgba(164, 57, 226, 0.5);}
.bottom {    transform: translateY(100px) rotateX(90deg);    background-color: rgba(212, 214, 53, 0.5);}
.before {    transform: translateZ(100px);    background-color: rgba(216, 107, 17, 0.5);}
.after {    transform: translateZ(-100px);    background-color: rgba(221,41, 176, 0.5);}
.box:hover {    cursor: pointer;    transform: rotateX(360deg) rotateY(360deg);}