CSS3 实现3D特效_var page2txt = document_css3 3d特效-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_87289175/article/details/142421134

   <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，没有过渡效果；

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

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

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

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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

   <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>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

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

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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这里写图片描述

   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>


![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fi.imgur.com%2FZFi5nP0.gif&pos_id=img-yk3H6IFh-1726913030946)

### 综合实例：

   <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){
tTransform = "rotateX(-90deg)";
 var nextPage = document.getElementById('page' + ++ currentIndex);
 nextPage.style.webkitTransform = 'rotateX(0deg)';
 }

 function prev(){
 if(currentIndex == 1){