I have a HTML code as
<div class="fl">
<div class="titleTextV">My ABC</div>
</div>
Now I have applied the CSS to rotate text as;
.titleTextV{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
font-size:1.3em;
background:#999;
height:100%;
}
I want this titleTextV class to span the entire height of its
container 100%, no px value and be positioned inside, but currently the text is moving out of the box.
If you user jQuery try this:
$('.fl').height($('.titleTextV').width());
And add display: inline-block; to your titleTextV class.
Live example at jsFiddle:
Related
How do I set one of my pictures into portrait format? i tried using image orientation and it says property name unknown. I tried rotate 90 and that said the same thing..
css rotate="90", image inherit, webkit transform
<div class="row">
<div class="primary col">
<img class="josh images"
src="https://via.placeholder.com/384x288?text=Joshs+Image"
width="288px" height="384px"
alt="My Pic" rotate="90">
</div>
</div>
for the image to rotate 90 degrees
The website is www.shaunstanley.co.uk and it's on the portfolio page
You should use CSS and add a transform rule to your image, such as:
.josh {
width: 288px;
height: 384px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
<img class="josh" src="https://via.placeholder.com/384x288?text=Joshs+Image">
See this fiddle : https://jsfiddle.net/mbzqL6e4/1/
If you only want to rotate this specific image, maybe add and use an ID selector instead of a class selector.
Ref: https://www.w3schools.com/cssref/css3_pr_transform.asp
I am trying to position a rotated headline next to some text. Statically it works very easy with absolute positioning (left picture). I have, however, difficulties when the page gets resized and the positioning fails (right picture).
Current CSS (can be changed):
.headline {
white-space: nowrap;
position: absolute;
top: 185px;
left: -20px;
transform: rotate(270deg);
}
Current HTML structure (can be changed):
<header>
<h1 class="headline">Über mich</h1>
</header>
<div class="text">
<p class="introduction">....</p>
</div>
How can I position the element so that I always stays 20px next to the paragraph?
Could someone link me to existing patterns how to solve this?
A solution with JS (and jQuery) would an option, I would, however, obviously prefer CSS.
Had the same issue. Managed to solve it like this in pure CSS :
.parent {
position: relative;
}
.child {
position: absolute;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right;
left: 30px; /* change this value to match needs */
top: 30px; /* change this value to match needs */
}
The solution was a combination of Diego's answer and Smamatti's comment:
I had to use transform-origin:bottom and width:0. That was working rather quickly, the big problem I had was positioning the text independently to the length of the text. I've only managed to do this by using javascript.
.header
{
margin: 0;
width: 0;
white-space: nowrap;
position: absolute;
text-align: left;
transform-origin: bottom;
margin-top: 280px;
transform: rotate(270deg);
}
Javascript (to ensure compatibility to variables text length):
function adjustSideHeader() {
//check if the headline is visible
if($('h1.headline').length > 0)
{
var headline = $('h1.headline')[0];
var stringLength = headline.textContent.length;
//add style tag to support media queries
document.querySelector('style').textContent +=
"h1.headline { margin-top: " + (stringLength*23.5) + "px; -webkit-transition: margin-top 2s; transition: margin-top 2s;}"
}
}
// fire it when document is loaded
$(document).ready(setTimeout(adjustSideHeader, 300));
Result:
Have you tried moving
<h1 class="headline">Über mich</h1>
inside
<div class="text">?
and set
.text {
position: relative;
}
so that the position is relative to to "text" div. After that you might want to move the Über mich text to the left by reducing it's left value.
Have you tried use position:relative and the margin property?, I suppose it would be something like this:
.headline {
white-space: nowrap;
position: relative; //changed
margin-top: 185px; //changed
margin-left: -20px; //changed
transform: rotate(270deg);
}
*Note: I think you should move the headline inside the paragraph
I have an answer that may be late but worked wonderfully for me.
Normally your text will have a class or id and it will be position:absolute, and positioning values after it, like so:
.TextClass{
position:absolute;
top:50%;
left:55%;
transform:rotate(-90deg);
etc.
However, when you rotate, the positioning becomes relative (as mentioned above).
I found out that by simply putting the rotated text inside a parent div, you can position the (unrotated, position absolute) parent div as much as you want, and then rotate the text (which will be position:relative) inside the parent div, like so:
.divname{
position:absolute;
top:50vh;
left:50vw;
}
.TextClass{
position:relative;
transform:rotate(-90deg);
}
I'm trying to vertically align text (pulled left) and a button (pulled right) inside a Bootstrap 3 alert. Somehow like this:
+------------------------------------------------+
| Some text [A button] |
+------------------------------------------------+
What I have so far is the following (Bootply):
<div class="alert alert-info" style="overflow:hidden">
<p class="pull-left">Some text</p>
<button class="btn btn-sm btn-default pull-right">A button</button>
</div>
The button is perfectly aligned (this was actually my first problem, solved here), but now the text is out of center.
I appreciate your help!
Assuming you don't want to use line-height, you can also try:
div.alert-info {
position: relative;
}
div.alert-info p.pull-left {
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
top: 50%;
}
http://www.bootply.com/117260
use display:table; width:100%; for the alert div, and for the p tag remove the float and use display:table-cell; vertical-align:middle. You can use the same rules for the button.
Here ya go i updated bootply here http://www.bootply.com/117259
All i did was add some line height on the pull-left class
.pull-left{line-height:30px}
That should do the trick
Given the following HTML elements and their styles, the bottom left corner of the reflection is trimmed, which is undesirable. I have tried adjusting the height, overflow, margin, padding, etc. and nothing has made the entire image show. Whats the problem here in the first place? Is there anything I can do without changing the structure of the HTML?
//Elements
<div>
<img id="someImage" src="some-img.png"/>
<section class="reflection"></section>
<div>
//Styles
div {
perspecive:600px;
transform-style:perserve-3d;
}
div > img {
transform:rotateY(-60deg);
}
div > .reflection{
background:-moz-element(#someImage) no-repeat;
transform:scaleY(-1);
}
Only works in Mozilla:
http://jsfiddle.net/zorikii/RWfhc/
If anyone is interested its a pretty simple solution. The -moz-element() function takes the element exactly as it is displayed on screen.
The element() CSS function defines an value generated from an arbitrary HTML element. This image is live, meaning that if the HTML element is changed, the CSS properties using the resulting value are automatically updated. - MDN
So all I had to do was add some padding to the top of the original image element...
img{
transform:rotateY(60deg);
-webkit-transform:rotateY(60deg);
padding-top:100px;
}
.reflection{
background: -moz-element(#someImage) no-repeat;
height:400px;width:200px;
-moz-transform: scaleY(-1);
transform: scaleY(-1);
}
Updated Fiddle
You need to set the transform "origin", like this:
html{
background:black;
}
div{
perspective:600px;
-webkit-perspective:600px;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
/* sets origin slightly higher so it just off center */
-webkit-transform-origin: 50% 40%;
}
img{
transform:rotateY(60deg);
-webkit-transform:rotateY(60deg);
}
.reflection{
background: -moz-element(#someImage) bottom left no-repeat;
height:300px;width:200px;
-moz-transform: scaleY(-1);
}
I've run into a rather strange problem. I have a div that is rotatable via CSS3. The div has a front div child and back div child, with the back div having -webkit-transform: rotateY( 180deg ) set.
The problem that once the parent element is rotated to display the back side of the div, it will only detect clicks of child elements on exactly one side of the div, specifically the second half of the div or right side. The front side div detects clicks on the entire face of element. Also, the z-indexes are fine. I assume that the issue may be due to the rotation and the browser displaying one half of the side "closer"?
The code that this is breaking is extremely complex, so I created a test file to demonstrate the problem below. I'm using a jQuery plugin I wrote for the 3D transformations, which can be found here https://github.com/pwhisenhunt/jquery.transform/blob/master/jquery.transform.js.
Edit: After experimentation, the clicking of the button element is only registering from 100-200px and not from 0-100px. In other words, it is in fact only registering on the second half of the div.
Any help is very much appreciated!
<html>
<head>
<style>
.element{
width:200;
height:200;
-webkit-perspective: 800;
-webkit-transform-style: preserve-3d;
}
.element figure {
display: block;
height: 100%;
width: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
border:1px solid yellow;
}
.element .front {
-webkit-border-radius:8px;
padding: 0px;
margin: 0px;
background-color:yellow;
z-index: 9870;
}
.element .back {
-webkit-border-radius:8px;
padding: 0px;
margin: 0;
-webkit-transform: rotateY( 180deg );
z-index: 0;
border: 1px solid red;
background-color:green;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://raw.github.com/pwhisenhunt/jquery.transform/master/jquery.transform.js"></script>
<script>
$(function(){
var temp = false;
$(".element").click(function(){
if(temp == false){
$(this).transform("setAnimationDuration", 1).transform("rotateY", 180);
$(this).unbind("mouseenter mouseleave");
button = $(document.createElement('div')).attr("id", "button").css({ width: 200, height: 50, backgroundColor:"blue" });
button.click(function(){
console.log("Clicking");
});
temp = true;
$(this).append(button);
}
})
})
</script>
</head>
<body>
<div class="element">
<figure class="front"></front>
<figure class="back"></front>
</div>
</body>
</html>
A JSFiddle Example of the Problem - Can be found HERE!
I know this reply is a bit too late for most of us here, but I ran into this problem earlier today, and none of the replies helped me solve it.
Solution by #kristiankeane made the other half non-clickable. I was using a container for the wrapper as well. Turns out, it's an odd bug in webkit, and I was able to fix it and make 100% of the element clickable by changing transform: rotateY(180deg) to transform: rotateY(-180deg)
It's really odd, and I don't know how it worked, but it did. I hope this helps someone!
I had this exact same issue, was able to fix it by slightly changing the parent rotation when flipped - I changed
`.flip-holder.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}`
to
`$.flip-holder.flipped {
-webkit-transform: rotateY(180.5deg);
-moz-transform: rotateY(180.5deg);
transform: rotateY(180.5deg);
}`
and the entire backface (plus overflowed elements positioned absolutely) were now clickable, and the browser did not render the extra 0.5deg of rotation so text and images are clear.
Translate both front and back just a little bit and they won't overlap.
Example:
.element .front {
-webkit-transform: translateZ(1px);
}
.element .back {
-webkit-transform: rotateY(180deg) translateZ(1px);
}
it seems that you are missing a container (in much the same way I was missing it).
see the official documentation
it's not the outer element being flipped, but a wrapper inside it. that in turn causes one of two divs to be displayed (and the transition to occur)
If your flip card structure is like this:
<div class="flipcard">
<div class="flipcard-front">
</div>
<div class="flipcard-back">
</div>
</div>
then add this to your CSS:
.flipcard:hover {
pointer-events: none;
}
.flipcard-back:hover {
pointer-events: auto;
}
could It be (and I'm just speculating) that you should use a live or delegate event bind instead of the regular. I'm speculating the click event maybe 'remembers' some how the original div position without the rotating.
After all tricks as rotate to back and rotate to 180.5 and other...
problem fixed only the following way:
When the rotation ends - create new element, clone html from rotated element, and insert new element instead of old