3d转换+示例旋转木马

css3提供了3D转换功能。允许使用3D转换来对元素进行格式化

transform:rotateX(360deg);      //X轴旋转360

transform:rotateY(360deg);      //Y轴旋转360

transform:rotateZ(360deg);      //Z轴旋转360

transform:scale3d(2,2,1);//x,y,z放大2,2,1

transform:translate3d(30px,30px,30px);//各方向平移30px;

matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1) ;//矩阵变换

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>7.3D转换</title>
<style>
.flex-box{
    display: flex;
    margin-top: 100px;
}
.flex-item{
    margin-left: 30px;
}

.div
{
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
    word-break:break-all;
}

#div
{
    background-color:yellow;
    color:#333;
    font-weight:bold
}
.div {
    -webkit-transition: all 3s ease-in-out;
    -moz-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out;
    cursor:pointer;
}
#div:hover{
        /* RotateX div */
    transform:rotateX(360deg);
    -ms-transform:rotateX(360deg); /* IE 9 */
    -webkit-transform:rotateX(360deg); /* Safari and Chrome */
}
/*translate------位移
值(50px;100px)从左边元素位移50个像素，并从顶部位移100px
*/
#div2:hover
{
    transform:rotateY(360deg);
    -ms-transform:rotateY(360deg); /* IE 9 */
    -webkit-transform:rotateY(360deg); /* Safari and Chrome */
}

#div3 {
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

#div3:hover{
    transform:rotateZ(360deg);
    -ms-transform:rotateZ(360deg); /* IE 9 */
    -webkit-transform:rotateZ(360deg); /* Safari and Chrome */
}

#div4:hover
{
    transform:scale3d(2,2,1);
    -ms-transform:scale3d(2,2,1); /* IE 9 */
    -webkit-transform:scale3d(2,2,1); /* Safari and Chrome */
}

#div5:hover
{
transform:translate3d(30px,30px,30px);
-ms-transform:translate3d(30px,30px,30px);/* IE 9 */
-webkit-transform:translate3d(30px,30px,30px); /* Safari and Chrome */
}
#div6
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:150; /* Safari and Chrome */
}
#div7{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari and Chrome */

}

</style>
</head>
<body>

<div class="flex-box">
    <div class="flex-item">
        <div class="div" id="div"><p style="text-align:center;">Hello,X轴旋转360度</p></div>
    </div>
    <div class="flex-item">
        <div class="div" id="div2">Hello. Y轴旋转360度</div>
    </div>
    <div class="flex-item">
        <div class="div" id="div3">
            Hello. Z轴旋转360度
        </div>
    </div>
    <div class="flex-item">
        <div class="div" id="div4">Hello.放大2,2,1</div>
    </div>
    <div class="flex-item">
        <div class="div" id="div5" >Hello.位移30px,30px,30px</div>
    </div>
    <div class="flex-item">
        <div id="div6"><div id="div7">HELLO</div></div>
    </div>
</div>
</body>
</html>

3D转换的示例，旋转木马预览图片

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7-3D旋转木马</title>
    <style>
      *{
          padding:0;
          margin:0;
      }
      #view{
          position: relative;
          top:200px;
          left:300px;
          width: 200px;
          height: 150px;
          /*加一个视距*/
          perspective: 1000px;
      }
      #view1{
          position: relative;
          top:200px;
          left:900px;
          width: 200px;
          height: 150px;
          /*加一个视距*/
          perspective: 1500px;
      }
      #contain,#contain1{
          position: absolute;
          width: 100%;
          height: 100%;
          /*加个3D视图声明*/
          transform-style:preserve-3d;
          /*动画两秒*/
          transition:transform 2s;
      }
      #contain figure,#contain1 figure{
          position: absolute;
          width: 178px;
          height: 128px;
          display: block;
      }
      #contain figure img,#contain1 figure img{
          width: 158px;
          height: 118px;
          position: absolute;
          top:10px;
          left: 10px;
      }
      #contain figure:nth-child(1){
          transform:rotateY(0deg) translateZ(245px);
      }
      #contain figure:nth-child(2){
          transform:rotateY(40deg) translateZ(245px);
      }
      #contain figure:nth-child(3){
          transform:rotateY(80deg) translateZ(245px);
      }
      #contain figure:nth-child(4){
          transform:rotateY(120deg) translateZ(245px);
      }
      #contain figure:nth-child(5){
          transform:rotateY(160deg) translateZ(245px);
      }
      #contain figure:nth-child(6){
          transform:rotateY(200deg) translateZ(245px);
      }
      #contain figure:nth-child(7){
          transform:rotateY(240deg) translateZ(245px);
      }
      #contain figure:nth-child(8){
          transform:rotateY(280deg) translateZ(245px);
      }
      #contain figure:nth-child(9){
          transform:rotateY(320deg) translateZ(245px);
      }
      /*九张图片，所以每张图片围绕Y轴旋转40度，然后让每个figure都离中心位置245px，245这个数字
      是根据图片的宽度来的，具体算法是--图片宽度除以2，再除以tan(20),自己可以画张多边形研究一下*/
      #contain1 figure:nth-child(1){
          transform:rotateX(0deg) translateZ(245px);
      }
      #contain1 figure:nth-child(2){
          transform:rotateX(40deg) translateZ(245px);
      }
      #contain1 figure:nth-child(3){
          transform:rotateX(80deg) translateZ(245px);
      }
      #contain1 figure:nth-child(4){
          transform:rotateX(120deg) translateZ(245px);
      }
      #contain1 figure:nth-child(5){
          transform:rotateX(160deg) translateZ(245px);
      }
      #contain1 figure:nth-child(6){
          transform:rotateX(200deg) translateZ(245px);
      }
      #contain1 figure:nth-child(7){
          transform:rotateX(240deg) translateZ(245px);
      }
      #contain1 figure:nth-child(8){
          transform:rotateX(280deg) translateZ(245px);
      }
      #contain1 figure:nth-child(9){
          transform:rotateX(320deg) translateZ(245px);
      }
      /*第二种旋转木马效果就是让图片围绕X轴旋转40度*/
      #button{
          width: 200px;
          position: relative;
          top:100px;
          left: 400px;
          text-align: center;
      }
      #previous,#next{
          padding:5px;
          font-size: 16px;
          background: #98f898;
      }
    </style>

</head>
<body>
    <div id="view">
        <div id="contain">
            <figure><img src="images/1.jpg"></figure>
            <figure><img src="images/2.jpg"></figure>
            <figure><img src="images/3.jpg"></figure>
            <figure><img src="images/4.jpg"></figure>
            <figure><img src="images/5.jpg"></figure>
            <figure><img src="images/6.jpg"></figure>
            <figure><img src="images/7.jpg"></figure>
            <figure><img src="images/8.jpg"></figure>
            <figure><img src="images/9.jpg"></figure>
        </div>
    </div>
    <div id="view1">
        <div id="contain1">
            <figure><img src="images/1.jpg"></figure>
            <figure><img src="images/2.jpg"></figure>
            <figure><img src="images/3.jpg"></figure>
            <figure><img src="images/4.jpg"></figure>
            <figure><img src="images/5.jpg"></figure>
            <figure><img src="images/6.jpg"></figure>
            <figure><img src="images/7.jpg"></figure>
            <figure><img src="images/8.jpg"></figure>
            <figure><img src="images/9.jpg"></figure>
        </div>
    </div>
    <div id="button">
        <button id="previous">上一张</button>
        <button id="next">下一张</button>
    </div>
    <script>
     //获得图片偏移中心距离的算法
     // $(function(){
     //     var num=$("#contain figure").length;//图片数量
     //     var w=$("#contain").width();//图片宽度
     //     var deg_n=Math.floor(360/num);//图片需要旋转的角度,用角度的一半可以算出图片离中心的距离
     //     var true_w=w/(2*Math.tan(deg_n/360*Math.PI));//需要把角度转换为弧度角 deg_n/2*2*Math.PI/360;
     //     alert(Math.round(true_w));
     // })

     //jquery 方法
       // $(function(){
       //     $("#contain figure").css("opacity","1")
       //     var n=0;
       //     var total=0;
       // $("#next").click(function(){
       //     n++;
       // total=n*40;
       //     $("#contain").css("transform","rotateY("+(-total)+"deg)");
       //     $("#contain1").css("transform","rotateX("+(-total)+"deg)");
       // })
       // $("#previous").click(function(){
       //     n--;
       //     total=n*40;
       //     $("#contain").css("transform","rotateY("+(-total)+"deg)");
       //     $("#contain1").css("transform","rotateX("+(-total)+"deg)");
       // })
       // })

       //原生JS方法
       var figure=document.getElementsByTagName(‘figure‘);
       var contain=document.getElementById(‘contain‘);
       var contain1=document.getElementById(‘contain1‘);
       var previous=document.getElementById(‘previous‘);
       var next=document.getElementById(‘next‘);
       var n=0,total=0;
       next.addEventListener(‘click‘,function(){
           n++;
           total=n*40;
           contain.style.transform="rotateY("+(-total)+"deg)";
           contain1.style.transform="rotateX("+(-total)+"deg)";
       },false);
       previous.addEventListener(‘click‘,function(){
           n--;
           total=n*40;
           contain.style.transform="rotateY("+(-total)+"deg)";
           contain1.style.transform="rotateX("+(-total)+"deg)";
       },false);

    </script>
</body>
</html>
时间： 2024-08-28 23:05:26

3d转换+示例旋转木马的相关文章

css3 2d转换3d转换以及动画的知识点汇总

css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值可为小数,不可为负值: 4.旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针: 5.倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜 2d转换的属性: transform transform-origin 用法: 例如: div { transform:

CSS3 2D、3D转换

2D转换方法:transform().rotate().scale().skew().matrix() 3D转换方法:rotateX().rotateY() 1.示例代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2D.3D转换</title> <style> section{width:

CSS3的2D与3D转换

2D和3D转换涉及到数学中的知识,作为一个数学专业的毕业生,不研究一下岂不是对不起自己的专业? 首先来看几个参数: 1.transform-origin:origin(起源,起点),也即变形的起点,在数学上可以理解为坐标原点. 其语法为:transform-origin:[<percentage> | <length> | left | center | right | top | bottom] | [<percentage> | <length> | l

CSS 3 3D转换

绘制3D环境 父元素设置了 preserve-3d  子元素就可以以父元素作为平面进行3d转换 transform-style: preserve-3d; 设置视点 :表示透视效果  值越小 透视效果越明显(联系现实)  perspective: 50px; 设置元素背面是否可见 visible:可见的 默认属性 hidden:;不可见 backface-visibility: hidden; 设置视点的原点 top  bottom  right  left  center (默认值) 可以用具

jquery.roundabout.js实现3D图片层叠旋转木马切换

最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js. 兼容性如图: html结构代码: <div id="featured-area"> <ul> <li><img src="images/fnfast.jpg"/></li> <li><img src="images/photoshop_plus.jpg"/>&l

CSS笔记（十二）CSS3之2D和3D转换

参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵. translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素. translateX(n) 定义 2D 转换,沿着 X 轴移动元素. translateY(n) 定义 2D 转换,沿着 Y 轴移动元素. scale(x,y) 定义 2D 缩放转换,改

CSS 3 学习——transform 3D转换渲染

以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其他元素也共享这个平面.2D变换函数虽然能改变元素的表现,但是这个被改变的元素仍然是在其包含块所处的平面内被渲染. 3D变换会产生一个变换矩阵,该变换矩阵在Z轴上的分量不为0.结果是把元素渲染到一个不同于其包含块所处的平面内.这将影响到通常情况下的"后来居上"的渲染规则:变换元素可能会和其相

动画，2D转换，，3D转换怎样运用

动画 @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式, 就能创建由当前样式逐渐改为新样式的动画效果. 属性{[email protected] 2animation } 如:@keyframes myfirst { from {background: red;} to {background: yellow;} } @-moz-keyframes myfirst /* Firefox */ { from {background: red;} to {b

string 到 Color 的转换示例：

string colorstr = "#FF4D4D4D";string hex = colorstr.ToString().Replace("#", "");byte alpha;byte pos = 0;if (hex.Length == 8){ alpha = System.Convert.ToByte(hex.Substring(pos, 2), 16); pos = 2;}else{ alpha = System.Convert.ToB