CSS3 3D旋转rotate效果实例介绍

2020-05-05 07:34:28易采站长站整理

本文实例为大家分享了CSS3 3D旋转rotate效果实例,供大家参考,具体内容如下

效果图:

示例代码

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>     
<html lang="en">     
<head>     
    <meta charset="UTF-8">     
    <title>3D旋转的Demo</title>     
    <style>     
        #experiment {     
            -webkit-perspective: 800;     
            -webkit-perspective-origin: 50% 50%;     
            -webkit-transform-style: -webkit-preserve-3d;     
        }     
        #block {     
            width: 200px;     
            height: 200px;     
            background-color: pink;     
            margin: 100px auto;     
            -webkit-transition: background-color 3s;     
        }     
        #block:hover {     
            background-color: purple;     
        }     
        #ep {     
            text-align: center;     
        }     
        #ep input {     
            width: 800px;     
        }