码迷,mamicode.com
首页 > Web开发 > 详细

CSS3 3D变换实例 滚动的正方体

时间:2018-01-09 12:11:19      阅读:257      评论:0      收藏:0      [点我收藏+]

标签:nsf   :hover   需要   浮点数   html   image   info   form   span   

笔记:

2D变换

  transform

    位移

      translateX() translateY() 

 简写:translate(X值,Y)  正值向右,负值向左

 

旋转 rotate()

     rotate(?deg)  括号中为角度值   正值是顺时针旋转,负值是逆时针旋转

   

缩放 scale()

   scale() 括号中为数值,可以为浮点数     如大于1是放大效果,小于1是缩小效果

 

变形(斜切

   skewX() skewY() 

    简写:skew(X轴斜切角度,Y轴斜切角度)  

 

body:hover div{

        transform:translate(100px,100px) rotate(30deg) scale(1.5) skew(40deg,40deg)

        }

 

 

    解析顺序:根据transform内写的顺序进行解析。

变换原点:

     transform-orign: 

           left right top bottom 

    center(默认) 当设置相应的值后,会按照相应设置的值发生变换。

3D变换

3D效果:首先给需要进行3D变换元素的父级添加3D环境和景深。

写法:

transform-style:preserve-3d;    <!--添加3D环境-->

 

perspective:数值; 如:300px;   <!--景深--> 数值较低的话无效果

 

transform

rotateX     沿X轴旋转:正值向右翻转,负值向左翻转

rotateY     沿y轴旋转:正值向右翻转,负值向左翻转

rotateZ     沿z轴旋转:正值向屏幕外,负值向屏幕内

translateX 沿X轴位移:正值向右,负值向左

translateY 沿y轴位移:正值向下,负值向上

translateZ 沿z轴位移:正值向屏幕外,负值向屏幕内

实例代码:

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>3D正方形实例</title>
 6         <style type="text/css">
 7             #box{
 8                 width: 100px;
 9                 height: 100px;
10                 padding: 100px;
11                 margin: 100px auto;
12                 perspective:300px;
13             }
14             
15             #val{
16                 width: 100px;
17                 height: 100px;
18                 position: relative;/*设置相对定位*/                
19                 transform-style: preserve-3d;/*给父级设置3D环境*/
20                 transform-origin: center center -50px;/*沿中轴线转动*/
21                 transition: 1s;/*响应时间1s*/    
22             }
23             #val div{
24                 position: absolute;/*设置绝对定位*/
25                 width: 100px;
26                 height: 100px;
27                 background: blue;
28                 text-align: center;
29                 font: 40px/100px "微软雅黑";        
30             }
31             #val div:nth-of-type(1){
32                 background: yellow;    
33             }
34             #val div:nth-of-type(2){
35                 left:-100px;/*定位 沿X轴向左移动100px*/
36                 background: red;
37                 transform-origin: right;/*位移点为右边*/
38                 transform:rotateY(-90deg);/*向Y轴翻转向左90度*/        
39             }
40             #val div:nth-of-type(3){
41                 top:-100px;/*定位 沿Y轴向上移动100px*/
42                 background:pink;
43                 transform-origin: bottom;/*位移点为下边*/
44                 transform:rotateX(90deg);  /* 沿X轴向内翻转90度*/        
45             }
46             #val div:nth-of-type(4){
47                 left:100px;    
48                 background: #FF6600;    
49                 transform-origin: left;
50                 transform:rotateY(90deg);
51             }
52             #val div:nth-of-type(5){
53                 top:100px;
54                 background: #1883BA;
55                 transform-origin: top;
56                 transform:rotateX(-90deg);        
57             }
58             #val div:nth-of-type(6){
59                 background: gray;    
60                 transform:translateZ(-100px) rotateX(-180deg);   /*翻转180度,不然数字6为镜像显示*/
61             }
62             #val:hover {        
63                 transform: rotateY(360deg) ;      /*鼠标停留,X轴旋转360度,Y轴旋转30度*/
64             }
65         </style>
66     </head>
67     <body>
68         <div id="box">
69             <div id="val">
70                 <div>1</div>
71                 <div>2</div>
72                 <div>3</div>
73                 <div>4</div>
74                 <div>5</div>
75                 <div>6</div>
76             </div>
77         </div>
78     </body>
79 </html>

 

 

 

实现效果:鼠标停留,立方体旋转。

技术分享图片

CSS3 3D变换实例 滚动的正方体

标签:nsf   :hover   需要   浮点数   html   image   info   form   span   

原文地址:https://www.cnblogs.com/yanchenghui/p/8250724.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!