-
3秒渐变：-webkit-transition:background 3s;查看全部
-
transtion 语法： transition：<过渡属性名称><过渡时间> 适应浏览器的兼容性： -webkit-transition 兼容谷歌、safari -moz-transition 兼容火狐 -o-transition 兼容opera查看全部
-
transform-origin属性调整旋转中心查看全部
-
使用transform属性调整元素 - translate translateX(x px) translateY(y px) translateZ(z px) - rotate rotateX(x px) rotateY(y px) rotateZ(z px) 声明窗口内元素的操作类型：3D或者2D： 1.transform-style:-webkit-preserve-3d; 2.transform-style:-webkit-preserve-2d;查看全部
-
perspective:XXpx ：调整物体距离窗口的纵深 perspective-origin：视线焦点在窗口上的位置查看全部
-
transition的过渡模式查看全部
-
transition多个属性的过渡效果查看全部
-
transition查看全部
-
transition animation -webkit-transition:color 2s查看全部
-
transition:改变的属性 时间;//一个属性的过度效果 transition:改变的属性1 时间1,改变的属性2 时间2;//多个属性的国度效果 transition:过渡属性名称 过渡时间 过渡模式 transition-timing-function ·ease 缓慢开始，缓慢结束 ·linear 匀速 ·ease-in 缓慢开始 ·ease-in-out 缓慢结束 ·ease-in-out 缓慢开始，缓慢结束(与ease稍有区别)查看全部
-
perspective:XXpx ：调整物体距离窗口的纵深 perspective-origin：视线焦点在窗口上的位置 声明窗口内元素的操作类型：3D或者2D： 1.transform-style:-webkit-preserve-3d; 2.transform-style:-webkit-preserve-2d; translate:X Y Z ：窗口内元素操作，位移操作，单位px rotate:X Y Z ：窗口内元素操作，旋转操作，单位deg查看全部
-
perspective:XXpx ：调整物体距离窗口的纵深 perspective-origin：视线焦点在窗口上的位置 声明窗口内元素的操作类型：3D或者2D： 1.transform-style:-webkit-preserve-3d; 2.transform-style:-webkit-preserve-2d; translate:X Y Z ：窗口内元素操作，位移操作，单位px rotate:X Y Z ：窗口内元素操作，旋转操作，单位deg查看全部
-
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);}查看全部
举报
0/150
提交
取消