-
perspective是物体距离显示器的距离 perspective-origin是视点属性查看全部
-
transition 实现的是平滑的过度效果 animation 是通过关键帧来实现过度效果,关键帧的效果性能较高查看全部
-
-webkit-transform-style:-webkit-preserve-3d 告诉浏览器使用3D效果查看全部
-
tanslate位移 rotate旋转查看全部
-
perspective查看全部
-
过渡模式查看全部
-
transition切割查看全部
-
transition:过渡查看全部
-
Done查看全部
-
<!DOCTYPE html> <html> <head> <title>正方体</title> </head> <body> <div class="wrap"> <div class="page page_before"></div> <div class="page page_after"></div> <div class="page page_top"></div> <div class="page page_bottom"></div> <div class="page page_left"></div> <div class="page page_right"></div> </div> </body> </html>查看全部
-
.wrap{margin:300px 100px;-webkit-transform-style:-webkit-perspective-3d;position:relative;} .page{border:1px solid;background:red;width:300px;height:300px;position:absolute;} .page_top{-webkit-perspective-origin:top;-webkit-transform:rotateX(-90deg);} .page_bottom{-webkit-perspective-origin:bottom;-webkit-transform:rotateX(90deg);} .page_before{-webkit-perspective-origin:50% 50%;} .page_after{-webkit-perspective-origin:50% 50%;} .page_right{-webkit-perspective-origin:right;-webkit-transform:rotateX(-90deg);} .page_left{-webkit-perspective-origin:left;-webkit-transform:rotateX(-90deg);}查看全部
-
rotate()/translate()/等函数的值是赋值,而不是让其旋转那个角度.查看全部
-
3D动画查看全部
-
chrome:-webkit-transition firfox:-moz-transiton查看全部
-
对div进行左翻动,则设置:transform-origin:left;查看全部
举报
0/150
提交
取消