unfortunately I have problem with setting image height with CSS, I've searched many places but found no answer that helped. Let me explain the problem. I have following CSS (it works) :
#cube
{
position: absolute;
max-width: 80%;
top: 50%;
left: 50%;
border-radius: 3px;
box-shadow: 0 3px 6px rgba(0,0,0,0.9);
text-align : center;
}
#cube
{
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media screen {
#cube {
max-height: 80%;
max-width: 80%;
}
}
</style>
for the image :
<img src="res/cube_na_strone.png" class="ri" id="cube"/><br />
It's working fine - but there is no container. When I added container in order to position text... :
html, body {
height: 100%;
margin: 0;
padding: 0;
color: black;
font-family : Arial;
}
#cubeContainer
{
position: absolute;
top: 10%;
left: 10%;
text-align : center;
}
#cubeContainer
{
top: 50%;
left: 40%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-90%, -60%);
}
#cube, #google {
position : relative;
top : 0px;
left : 0px;
max-width: 100%;
max-height: 100%;
border-radius: 4px;
box-shadow: 0 3px 6px rgba(0,0,0,0.9);
}
#cube:hover, #google:hover {
box-shadow: 0 0px 1px rgba(0,0,0,0.9);
}
#googleContainer
{
position: absolute;
top: 50%;
left: 60%;
text-align : center;
}
#googleContainer
{
top: 50%;
left: 60%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-10%, -60%);
}
#cube, #google {
position : relative;
top : 0px;
left : 0px;
max-width: 100%;
max-height: 100%;
margin-bottom : 10px;
border-radius: 4px;
box-shadow: 0 3px 6px rgba(0,0,0,0.9);
}
#cube:hover, #google:hover {
box-shadow: 0 0px 1px rgba(0,0,0,0.9);
}
#media screen {
#cubeContainer , #googleContainer {
max-height: 80%;
max-width: 40%;
}
}
For following elements :
<body>
<div id="cubeContainer">
<img src="res/cube_na_strone.png" class="ri" id="cube"/><br />
<a id="cube_a" href="#">Wirtualne wycieczki</a>
</div>
<div id="googleContainer">
<img src="res/googleview.png" class="ri" id="google"/><br />
<a id="A1" href="#">Business View w mapach Google</a>
</div>
</body>
Problem begins :( Image's height remains unchanged.
Here are those sites :
http://vr.fotomilo.pl/
http://vr.fotomilo.pl/vr.aspx
Containers #cubeContainer and #googleContainer need height. Try to set height to 100%
try changing the image's dimensions via this rule:
div#cubeContainer img{}
div#googleContainer img{}
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
View Image
Look at the shadow at the bottom of the above popup how do I get this type of shadow
body{
background: rgba(135,206,250, 0.5);
}
.card {
width: 500px;
height: 250px;
background: white;
}
<div class="card">
</div>
body{
background: rgba(135,206,250, 0.5);
}
.card {
width: 500px;
height: 250px;
background: white;
}
.shadow
{
position: relative;
}
.shadow:before, .shadow:after
{
position: absolute;
z-index: -1;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
-webkit-box-shadow: 0 35px 20px #989898;
-moz-box-shadow: 0 35px 20px #989898;
box-shadow: 0 35px 20px #989898 ;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.shadow:after
{
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
right: 10px;
left: auto;
}
<!DOCTYPE html>
<html>
<body>
<div class="card shadow">
</div>
</body>
</html>
You have to use css pseudo element along with transform: rotate
Try following snippet.
body {
background: #ccc
}
.box h3 {
text-align: center;
position: relative;
top: 80px;
}
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.shadow {
position: relative;
}
.shadow:before,
.shadow:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.shadow:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
<div class="box shadow">
<h3>test of the week?</h3>
</div>
div.tp-border-bottom's border hide when div.tp-banner add transform property, if I set div.tp-border-bottom:after element height to 2px then it is visible, all of this in android webview platform
.tp-banner {
width: 100px;
height: 60px;
-webkit-transform: translate(0px, 0px) translateZ(0px);
transform: translate(0px, 0px) translateZ(0px);
}
.tp-border-bottom {
position: relative;
width: 100px;
height: 60px;
}
.tp-border-bottom:after {
content: "";
position: absolute;
font-size: 0;
line-height: 0;
background-color: #e1e1e1;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
-webkit-transform-origin: 0 1px;
-ms-transform-origin: 0 1px;
transform-origin: 0 1px;
}
.tp-border-scale:after {
-webkit-transform: scaleY(0.3333);
-ms-transform: scaleY(0.3333);
transform: scaleY(0.3333);
}
/*#media only screen and (-webkit-min-device-pixel-ratio: 3) {
.tp-border-bottom:after {
-webkit-transform: scaleY(0.3333);
-ms-transform: scaleY(0.3333);
transform: scaleY(0.3333);
}
}*/
<div class="tp-banner"></div>
<div class="tp-border-bottom tp-border-scale"></div>
Try to add this style to all the transformed elements:
-webkit-backface-visibility: hidden;
Taken from similar question CSS3 hover effects make weird impact on other elements in Chrome
I have a circle that I want to grow both width and height and spin to face upright. The problem is you can see the embedded checkmark starts outside of the circle and spirals inwards as opposed to growing with the circle.
$(function() {
$("span").addClass("active");
})
span {
position: absolute;
display:block;
color: red;
font-size: 0px;
font-weight: bold;
width: 0px;
height: 0px;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
line-height:80px;
text-align: center;
background: rgba(32,167,110,0.9);
border: 2px solid rgb(32,167,110);
border-radius: 50%;
-webkit-transform: rotateZ(-360deg);
-ms-transform: rotateZ(-360deg);
transform: rotateZ(-360sdeg);
transition: all 5s;
margin-left: -20px;
margin-top:-34px;
}
span.active {
-webkit-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
transform: rotateZ(0sdeg);
width: 80px;
height: 80px;
font-size: 45px;
margin-left: -40px;
margin-top:-68px;
}
<span>✓</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I would like to keep the checkmark centered inside the circle as it grows.
I'm not sure if I got your question correctly, but if you want to hide the checkmark outside of the green circle you can add the css property overflow: hidden;.
EDIT: According to the author's comment, I added a new solution.
If you want to position the checkmark sign inside the circle and nevertheless transform it together with the circle, it is best to add another element (or pseudoelement) for the checkmark sign and only assign the transformation to the circle. Here is an example of the transformation with a pseudoelement.
$(function() {
$("span").addClass("active");
});
/* <div> is only for layouting (centering into the middle) */
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
span {
display: block;
position: relative; /* needs to be set, that the checkmark is positioned relative to the <span> */
color: red;
font-size: 0;
font-weight: bold;
width: 0;
height: 0;
text-align: center;
background: rgba(32,167,110,0.9);
border: 2px solid rgb(32,167,110);
border-radius: 50%;
-webkit-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
transition: all 5s;
}
span:after {
content: "✓";
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
span.active {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
width: 80px;
height: 80px;
font-size: 45px;
}
<div>
<span></span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Can I transform: rotateY a div to counter the transform: rotateY of his parent ?
For example: if I have a parent div with rotateY(-45deg), all his childrens will be -45deg. Why can't I add rotateY(45deg) to the children to make it look like no rotation affected it?
Demo: http://jsfiddle.net/eBT4A/
You can add rotateY(45deg) to the children where parent div have rotateY(-45deg), to make it look like no rotation affected it only when you set same pivot point to these two rotation,
in your demo example you have not apply same pivot point,
Try this...
<html>
<head>
<style type="text/css">
body {
-webkit-perspective: 500;
}
#content {
position:absolute;
top: 0px;
left: 0px;
width: 300px;
height: 500px;
background: #000;
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotate(45deg);
-moz-transform-origin: 0px 0px;
-moz-transform: rotate(45deg);
}
#element {
position:absolute;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
background: #f00;
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotate(-45deg);
-moz-transform-origin: 0px 0px;
-moz-transform: rotate(-45deg);
}
</style>
</head>
<body>
<div id="content">
<div id="element"></div>
</div>
</body>
</html>
You need to add preserve-3d to the parent:
body {
-webkit-perspective: 500;
}
#content {
position:fixed;
top: 20px;
left: 0;
width: 300px;
height: 500px;
background: #000;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateY(45deg);
-webkit-transform-style: preserve-3d;
}
#element {
position:fixed;
top: 20px;
left: 50%;
width: 50px;
height: 50px;
background: #f00;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateY(-45deg);
}
updated fiddle
As far as I know, that won't work in IE.
I have the following code:
http://jsfiddle.net/cosoroaba/nCEwv/
HTML:
<div id="square">
<div class="corner-wrapper">
<div id="ctr"></div>
</div>
</div>
CSS:
#square {
border: 1px solid #CCCCCC;
display: block;
height: 400px;
line-height: 400px;
margin: 50px auto;
overflow: hidden;
position: relative;
text-align: center;
width: 400px;
}
.corner-wrapper{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
clip: rect(0px, 141.421px, 70.7107px, 0px);
height: 141.421px;
position: absolute;
right: -20.7107px;
top: -20.7107px;
width: 141.421px;
}
#ctr{
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
left: 20.7107px;
top: 20.7107px;
background-color: blue;
display: block;
height: 100px;
position: absolute;
width: 100px;
}
#ctr:hover{
background-color: green;
}
#ctr:active{
background-color: red;
}
I'm rotating the wrapper in one direction and the content in the opposite direction, then cutting the wrapper in half using clip, to achieve a "triangle"-div
which works well on FF,Chrome and Opera
but there is this issue in IE9 http://www.screenr.com/ikos
hover is triggered on the content in IE9 even if it would be hidden by the wrapper
I'd refactor your code, there's a lot of unnecessary transformations going on, and if you change the size of your container your have to recalculate everything. I haven't checked in IE9 but this should work:
<div id="square">
<div id="ctr"></div>
</div>
CSS
#square {
border: 1px solid #CCCCCC;
display: block;
height: 400px;
line-height: 400px;
margin: 50px auto;
overflow: hidden;
position: relative;
text-align: center;
width: 400px;
}
#ctr{
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
right: 0;
top: 0;
background-color: blue;
display: block;
height: 150px;
position: absolute;
width: 100px;
}
#ctr:hover{
background-color: green;
}
#ctr:active{
background-color: red;
}
jsfiddle:
http://jsfiddle.net/exKJK/