CSS3 实现3D特效

朱雀 2022-07-13 08:55 256阅读 0赞

## CSS3 中的动画效果 ##

*  transition
 *  animate

transition主要是从一个属性平滑过渡到另一个属性，而animate则是结合关键帧技术，实现更加复杂的动画效果；

transion:过渡属性名称 过渡时间

谷歌、opera、火狐、苹果浏览器不支持，注意兼容性

-webkit-transition: color 1s;

### 实例：我们在让背景颜色做一个改变 ###

<style> #block{ width:400px; height:400px; background-color: blue; margin:0 auto; } #block:hover{ background-color: red; } </style>
    </head>
    <body>
        <div id="block">
        </div>
    </body>

鼠标悬停上去之后，块状元素的背景颜色立即由蓝色变成红色，如果要实现平滑过渡，只需要在`#block`上添加一个过去属性`-webkit-transition: background-color 3s;`，如何添加在`#block:hover`上，那么就会hover的时候有3s的过渡，失去焦点后，立马变成blue，没有过渡效果；

![XBWVGNt.gif][]

上面其实是两个属性写在一起，分开写是这样的：;

transition-property：color
       transition-duration:1s;

那么如何设置多个属性的过渡效果呢？

![0YDrsvD.png][]

![Qi4BuNm.png][]

<style> #block{ width:400px; height:400px; background-color: blue; margin:0 auto; -webkit-transition: background-color 3s linear , height 2s linear; } #block:hover{ background-color: red; height:600px; } </style>
    </head>
    <body>
        <div id="block">
        </div>
    </body>

![i2Pwpyn.gif][]

translateX是从屏幕左边到右边；translateY是从上边到下边；translateZ是从屏幕外到里边；外为负数，越大，里为正数，表示越远；rotateX和rotateY都是分别沿着x轴中心与y轴中心逆时针为正，rotateZ是沿着顺时针为正；

使用css3创建简单的3d场景

![AT1dZ1L.png][]  
![U0npLSn.png][]  
![这里写图片描述][SouthEast]

perspective: 500px;//3D物体距屏幕的距离
    
     perspective-origin: 10% 10%;//3D元素基点基于X,Y轴的位置 transform:rotate(45deg);//2D/3D转换，旋转，缩放，移动或倾斜

## 简单的3d场景设置 ##

<style> #experiment{ -webkit-perspective: 800; //视距深度 -webkit-perspective-origin: 50% 50%; //视距中心 -webkit-transform-style:-webkit-preserve-3d;//3d场景 } #block{ width:500px; height:500px; background-color: #69c; margin:100px auto; -webkit-transform:rotateZ(45deg); } </style>
    </head>
    <body>
        <div id="experiment">
            <div id="block">
            </div>
        </div>
    </body>
    
    
    ![](http://i.imgur.com/ZFi5nP0.gif)
    
    ### 综合实例：
    
       <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>3d场景演示</title>
        <style> #space3d{ -webkit-perspective: 800; -webkit-perspective-origin: 50% 50%; overflow:hidden; } #container{ height: 400px; width: 400px; position: relative; margin: 0px auto; -webkit-transform-style:preserve-3d; } .page{ height: 360px; width:360px; padding: 20px; position: absolute; background-color: #000; color: #FFF; font-weight: bold; font-size: 360px; text-align: center;/* 垂直居中 */ line-height: 360px;/* 水平居中 */ -webkit-transform-origin:bottom; -webkit-transition: -webkit-transform 1s linear; } #page2,#page3,#page4,#page5,#page6{ -webkit-transform: rotateX(90deg); } #btnoption{ margin: 40px auto; text-align: center;/* ... */ } </style>
    </head>
    <body>
        <div id="space3d">
            <div id="container">
                <div class="page" id = "page1">1</div>
                <div class="page" id = "page2">2</div>
                <div class="page" id = "page3">3</div>
                <div class="page" id = "page4">4</div>
                <div class="page" id = "page5">5</div>
                <div class="page" id = "page6">6</div>
            </div>
    
        </div>
    
        <div id="btnoption">
            <button id="next" value="next" onclick="next()">next</button>
            <button id="prev" value="previous" onclick="prev()">prev</button>
        </div>
    
        <script> var currentIndex = 1; function next(){ if(currentIndex == 6){ return; } var currntPage = document.getElementById('page' + currentIndex); currntPage.style.webkitTransform = "rotateX(-90deg)"; var nextPage = document.getElementById('page' + ++ currentIndex); nextPage.style.webkitTransform = 'rotateX(0deg)'; } function prev(){ if(currentIndex == 1){ return; } var currntPage = document.getElementById('page' + currentIndex); currntPage.style.webkitTransform = "rotateX(90deg)"; var prevPage = document.getElementById('page' + -- currentIndex); prevPage.style.webkitTransform = 'rotateX(0deg)'; } </script>
    </body>

![of0Nuex.gif][]

[XBWVGNt.gif]: http://i.imgur.com/XBWVGNt.gif
[0YDrsvD.png]: http://i.imgur.com/0YDrsvD.png
[Qi4BuNm.png]: http://i.imgur.com/Qi4BuNm.png
[i2Pwpyn.gif]: http://i.imgur.com/i2Pwpyn.gif
[AT1dZ1L.png]: http://i.imgur.com/AT1dZ1L.png
[U0npLSn.png]: http://i.imgur.com/U0npLSn.png
[SouthEast]: /images/20220713/879b70e1fb9b48988d46eec7576cf45c.png
[of0Nuex.gif]: http://i.imgur.com/of0Nuex.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，256人围观）

还没有评论，来说两句吧...

相关阅读

相关 css3图片3d倾斜列表js特效

[下载地址![icon-default.png?t=L892][icon-default.png_t_L892]/images/20220828/ffa1ac500de24c4

灰太狼/ 2022年09月14日 00:28/ 0 赞/ 162 阅读

相关 201.纯CSS 3D图片悬停特效

效果 (源码网盘地址在最后) ![9d2094216af66ca181b7a183c9c6e695.gif][] 源码 index.html <!DOC

╰+哭是因爲堅強的太久メ/ 2022年09月04日 14:54/ 0 赞/ 142 阅读

相关 CSS3 3D圆点波浪动画js特效

[下载地址][Link 1] CSS3 3D圆点波浪动画特效是一款圆点矩阵波浪滚动，3D粒子波浪动画特效。 ![4308a7cb79605fd30938276368fc6b

一时失言乱红尘/ 2022年08月28日 04:53/ 0 赞/ 178 阅读

相关 CSS3爱心文字3D旋转动画js特效

[下载地址][Link 1] CSS3爱心文字3D旋转动画特效是一款情人节爱心文字表白动画，爱心3D旋转动画特效。 ![57906279af7acf6581b44cb493

ゝ一世哀愁。/ 2022年08月28日 04:52/ 0 赞/ 200 阅读

相关纯CSS3超酷3D旋转立方体动画特效

这是一款效果非常炫酷的纯[CSS3][] 3D旋转立方体动画特效。该3D立方体使用CSS3 perspective制作，可以在水平方向、垂直方向和平面视角方向旋转，效果相当震撼

绝地灬酷狼/ 2022年08月07日 16:48/ 0 赞/ 238 阅读

相关 css3 3D旋转特效

最近自己的网站正在制作，由于是个人网站，所以我傲娇的抛弃了IE，痛快的用起了css3和html5的诸多特效，然而问题亦随之而来。这篇文章的主要讲解在使用css3的3D旋转的时候

「爱情、让人受尽委屈。」/ 2022年07月16日 06:28/ 0 赞/ 281 阅读

相关 CSS3 实现3D特效

CSS3 中的动画效果 transition animate transition主要是从一个属性平滑过渡到另一个属性，而animate则是结合关键帧技术，

朱雀/ 2022年07月13日 08:55/ 0 赞/ 257 阅读

相关 css3 实现正方体3D旋转

源代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

亦凉/ 2022年06月04日 00:06/ 0 赞/ 240 阅读

相关 css页面特效--2D、3D转换、过渡、动画

1、2D、3D转换通过除css3转换，能够对元素进行移动、缩放、转位、拉长或伸缩等。转换是使元素改变形状、尺寸和位置的一种效果。可以使用2D、3D来转换元素。 2D转换方

ゝ一纸荒年。/ 2022年05月25日 03:58/ 0 赞/ 190 阅读

相关 css3实现流星雨特效

用到css3知识: radial-gradient 径向渐变， filter， transform， animation以及 nth-child选择器等

今天药忘吃喽~/ 2021年12月10日 08:37/ 0 赞/ 354 阅读