在HTML中rotate属性,Css3属性RotateX的使用

最终的效果演示：

*{padding: 0;margin: 0;}

ul,li{list-style-type: none;}

a{text-decoration: none;}

/* 代码开始 */

.transform{

position: absolute;

top: 50%;

left:50%;

-webkit-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

z-index: 99;

}

.rotatex{

position: relative;

width: 300px;

height: 345px;

-webkit-perspective:1700px;

perspective:1700px;

-webkit-perspective-origin:50% 50%;

perspective-origin:50% 50%;

overflow: hidden;

}

.rotatex .rotatex-hiden{

width: 100%;

height: 100%;

position:relative;

-webkit-transform-style:preserve-3d;

transform-style:preserve-3d;

}

.rotatex .img{

width: 100%;

height: 100%;

}

.rotatex .img,

.rotatex .dask{

-webkit-transition:all .5s ease-in-out;

transition:all .5s ease-in-out

}

.rotatex .img{

max-width: 100%;

vertical-align: middle;

backface-visibility:hidden;

}

.rotatex .dask{

width:100%;

height:100%;

position: absolute;

top: 0;

left: 0;

opacity:0;

background:rgba(1,109,254,1);

text-align:center;

color: #fff;

backface-visibility:hidden;

-webkit-transform:rotateX(-180deg);

transform:rotateX(-180deg);

z-index: 99

}

.rotatex .dask .dask-intro{

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

}

.rotatex .href{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 100

}

/* 鼠标移入 */

.rotatex:hover .img{

-webkit-transform: rotateX(-180deg);

transform: rotateX(-180deg);

}

.rotatex:hover .dask{

opacity:1;

-webkit-transform: rotateX(0);

transform: rotateX(0);

}

环企优站科技

UI设计，企业建站，海量精致模板

在HTML中rotate属性,Css3属性RotateX的使用相关推荐

html中的变圆的属性,CSS3属性之圆角效果——border-radius属性
在css3之前,要实现圆角的效果可以通过图片或者用margin属性实现(可以参考这里:http://www.hicss.net/css-practise-of-image-round-box/).实现 ...
html的过渡属性,CSS3属性transition（过渡）多属性详解
transform呈现的是一种变形结果,而transition呈现的是一种过渡,通俗点说就是一种动画转换过程,如渐显.渐弱.动画快慢等.transition和transform是两种不同的动画模型. ...
CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）
在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45 ...
html旋转角度计算,CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate） | 0101后花园...
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) | 0101后花园 2018-09-26 在CSS3中,可以利用transfor ...
妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么一.总结一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
html5中css新增的属性,css3有哪些新增属性？常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...
详解CSS3中新增的内容属性：content
详解CSS3中新增的内容属性:content 1. 用法: content属性用于插入生成的内容,常和:before选择器和:after选择器配合使用,将生成的内容放在一个元素内容的前面或后面. 2. ...
css3新增属性有哪些？css3中常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 我的学习交 ...
不是css3新增的技术,css3新增属性有哪些？css3中常用的新增属性总结，分享
来提问这个问题的人都应该知道css3中常用的新增属性. 一.css3新增边框属性 1.css3新增属性之border-color:为边框设置多种颜色 % 这里说一下题外话,需要注意:"bor ...

在HTML中rotate属性,Css3属性RotateX的使用

环企优站科技

在HTML中rotate属性,Css3属性RotateX的使用相关推荐

最新文章

热门文章